Для перелистывания слайдера использую cssEase:'linear' и когда навожу на элемент - появляется box-shadow, позиция мышки остается на слайде. Слайдер при этом продолжает скроллиться и box-shadow скроллится вместе со слайдером, но позиция мышки остается неизменной.
$(function() {
$('.your-class').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 0,
speed: 4000,
pauseOnHover: false,
cssEase:'linear'
});
});
.your-class div {
display: block;
height: 100px;
width: 800px;
}
.your-class div:hover {
-webkit-box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
}
Ответ
Во время анимации перемещения :hover не срабатывает. Браузер ждет ее окончания и эта проблема известна https://bugs.chromium.org/p/chromium/issues/detail?id=246304.
Ничего тут не поделаешь.
Возможное решение: кастомно ставить класс .hover под элемент, над которым находится мышь:
$(function () {
$('.your-class').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 0,
speed: 4000,
pauseOnHover: false,
cssEase: 'linear'
});
var lastCoordinates = [0, 0];
$(document).off('mousemove').mousemove(function (e) {
lastCoordinates = [e.pageX, e.pageY];
});
$(document).on('touchmove', function (e) {
//lastCoordinates = [e.pageX, e.pageY];
});
setInterval(function () {
$('.hover').removeClass('hover');
var element = $(document.elementFromPoint(lastCoordinates[0],
lastCoordinates[1]));
if (element.closest('.your-class').length) {
element.addClass('hover')
}
}, 100);
});
.your-class div {
display: block;
height: 100px;
width: 800px;
}
.your-class div.hover {
-webkit-box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
}
Комментариев нет:
Отправить комментарий