Менять курсор при нажатии левой кнопки мыши
Здравствуйте!
Есть 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>
|
Цитата:
|
Igorsrt,
<style>
div{
background-color: red;
width: 500px;
height: 500px;
}
div:active{
cursor: pointer;
}
</style>
<div class="slider-for">слайдер</div>
усовершенствованная версия |
Цитата:
|
https://css-tricks.com/using-css-cur...le-header-id-1
Наведи на кнопки Happy, Sad, Meh ) |
Цитата:
|
Цитата:
|
еще, наверное, забыл добавить, что не отпускается тогда, когда курсор вышел за пределы элемента.
Для этого надо ставить слушатель на документ.) |
Цитата:
|
хо-хо^^ я тебя раскусил...
Для этого надо ставить слушатель на документ.) а это можешь, "ну или на ближайшую область"?) |
var el = document.querySelector('.slider-for'), flag = 0;
el.addEventListener('mousedown', e =>{
flag = 1;
el.style.cursor = 'pointer';
});
document.addEventListener('mouseup', e =>{
flag = 0;
el.style.cursor = 'default';
});
el.addEventListener('mouseout', e =>el.style.cursor = 'default');
el.addEventListener('mouseover' ,e=>{
if(flag) el.style.cursor = 'pointer';
});
|
Цитата:
Цитата:
Цитата:
<style>
.slider-for {
cursor: grab;
}
.slider-for:active {
cursor: grabbing;
}
</style>
<button class="slider-for">Слайдер</button>
Как бы вы перетащили вещь в реальном мире? Сначала ваша рука в расслабленном состоянии (cursor: grab), ничего не хватает. Затем вы сжимаете в ладони предмет (cursor: grabbing), теперь вы можете его переместить на другое место. Затем вы разжимаете ладонь и отпускаете предмет. Рука возвращается в исходное положение. (cursor: grab) Но она готова сжимать и разжимать! Она всегда сжимает какой-то предмет, и находится в расслабленном состоянии, когда ничего не держит. Именно так работает код, который я привёл. Он реален. Там нет яростно сжимающей пустоту руки, и нет руки, перемещающей предмет магическим способом! |
Здесь в слайдерах есть подобная реализация на чистом css:hover & :active
Наведение на слайдер: курсор 1 Наведение на блок: курсор 2 (стандартный ховер) Нажатие на слайдер: курсор 3 (захват) Действует так же при зажиме блока, но курсор не меняется. Откройте консоль, гляньте стили. |
| Часовой пояс GMT +3, время: 09:17. |