Менять курсор при нажатии левой кнопки мыши

[Igorsrt]

Здравствуйте!
Есть Slick Slider, включена функция "листания" слайдов мышкой (draggable: true). Для перелистывания нужно нажать кнопку мыши на слайде и потянуть влево или вправо.
Я хочу, что бы при нажатии кнопки мыши на слайде курсор менялся (мне кажется так понятнее будет, что слайд можно пролистнуть).
Искал ответ в гугл, но ничего не нашел - либо, кроме меня, это нафиг никому не нужно, либо решение слишком очевидно, что бы о нем писать.. ))

[laimas]

Искал ответ в гугл, но ничего не нашел

http://htmlbook.ru/css/cursor

[Igorsrt]

в css можно либо при наведении (:hover) либо :active менять стили.. а мне же нужно, что бы при клике на кнопку (нажал кнопку - поменялся курсор, отпустил - вернулся прежний)

[laimas]

Ну так меняйте скриптом, проблема в самом курсоре, или как именно в этом плагине изменить?

[Igorsrt]

http://htmlbook.ru/css/cursor

Ну так меняйте скриптом, проблема в самом курсоре, или как именно в этом плагине изменить?

проблема - как именно менять

[laimas]

Согласно документации можно устанавливать события, значит попробуйте обработчики событий mousedown, mouseup, где и изменяйте курсор.

[MC-XOBAHCK]

в css можно либо при наведении (:hover) либо :active менять стили

Не совсем так, через CSS можно и просто назначить курсор для элемента, без всяких hover и active.

мне же нужно, что бы при клике на кнопку (нажал кнопку - поменялся курсор, отпустил - вернулся прежний)

Не совсем понятно и в вопросе нет никакого исходника html-макета.

Если поможет, приведу такой пример:

<style>.test{display: inline-block; width: 50px; height: 50px; margin-right: 15px; border: solid 1px #ccc;}</style>


<div class="test" style="background: red;"></div>
<div class="test" style="background: blue;"></div>
<div class="test" style="background: brown;"></div>
<div class="test" style="background: yellow;"></div>
<div class="test" style="background: orangered;"></div>
<button id="btn">Сменить курсор</button>


<script>
    document.querySelector('#btn').addEventListener('click', function() {
        let cursorArr = ['e-resize', 'col-resize', '-webkit-grab', 'all-scroll', 'pointer'];

        this.classList.toggle('cursor-active');
        
        let blocks = document.querySelectorAll('.test');

        if (this.classList.contains('cursor-active')) {
            this.textContent = 'Вернуть курсор';
            blocks.forEach((el, i) => el.style.cursor = cursorArr[i]);
        }
        else {
            this.textContent = 'Сменить курсор';
            blocks.forEach((el, i) => el.style.cursor = 'auto');
        }
    })
</script>

[Igorsrt]

Согласно документации можно устанавливать события, значит попробуйте обработчики событий mousedown, mouseup, где и изменяйте курсор.

вот такой код попробовал:

jQuery('.slider-for').on({
  'mousedown': function (e) {
    jQuery(this).addClass('mouseDown');
    return false;
  },
  'mouseup': function () {
    jQuery(this).removeClass('mouseDown');
  }
});

При нажатии на кнопку - класс mouseDown добавляется, но при отпускании кнопки - почему-то пока не удаляется...

[laimas]

В общем то должно работать. Меняйте привило, то есть .css({cursor: нужный/текущий})

[j0hnik]

<style>
		div{
			width: 500px;
			height: 500px;
		}
	</style>
<div class="slider-for">слайдер</div>
	<script>

document.querySelector('.slider-for').onmousedown = e => e.target.style.cursor = 'pointer';
document.querySelector('.slider-for').onmouseup = e => e.target.style.cursor = 'default';

	</script>