Страницы

Поиск по вопросам

пятница, 9 ноября 2018 г.

Hover на slick-слайдер

Для перелистывания слайдера использую 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); }

aaaaa aaaaaaa
bbbbb bbbbbbb
ccccc ccccccc
ddddd ddddddd
eeeee eeeeeee
fffff fffffff
ggggg ggggggg
hhhhh hhhhhhh


Ответ

Во время анимации перемещения :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); }

aaaaa aaaaaaa
bbbbb bbbbbbb
ccccc ccccccc
ddddd ddddddd
eeeee eeeeeee
fffff fffffff
ggggg ggggggg
hhhhh hhhhhhh

Комментариев нет:

Отправить комментарий