Менять курсор при нажатии левой кнопки мыши
Здравствуйте!
Есть Slick Slider, включена функция "листания" слайдов мышкой (draggable: true). Для перелистывания нужно нажать кнопку мыши на слайде и потянуть влево или вправо. Я хочу, что бы при нажатии кнопки мыши на слайде курсор менялся (мне кажется так понятнее будет, что слайд можно пролистнуть). Искал ответ в гугл, но ничего не нашел - либо, кроме меня, это нафиг никому не нужно, либо решение слишком очевидно, что бы о нем писать.. )) |
Цитата:
|
в css можно либо при наведении (:hover) либо :active менять стили.. а мне же нужно, что бы при клике на кнопку (нажал кнопку - поменялся курсор, отпустил - вернулся прежний)
|
Ну так меняйте скриптом, проблема в самом курсоре, или как именно в этом плагине изменить?
|
Цитата:
Цитата:
|
Согласно документации можно устанавливать события, значит попробуйте обработчики событий mousedown, mouseup, где и изменяйте курсор.
|
Цитата:
Цитата:
Если поможет, приведу такой пример:
<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>
|
Цитата:
jQuery('.slider-for').on({
'mousedown': function (e) {
jQuery(this).addClass('mouseDown');
return false;
},
'mouseup': function () {
jQuery(this).removeClass('mouseDown');
}
});
При нажатии на кнопку - класс mouseDown добавляется, но при отпускании кнопки - почему-то пока не удаляется...:-E |
В общем то должно работать. Меняйте привило, то есть .css({cursor: нужный/текущий})
|
<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>
|
| Часовой пояс GMT +3, время: 15:05. |