Javascript \ Jquery курсор мыши - Несоответствия при наведении на элементы

Question

Я бы хотел заменить курсор мыши на моем веб-сайте собственным, состоящим из двух элементов:

• курсор;
• тропа, которая следует за курсором и отстает от него.

Сделать это с помощью jquery очень просто.

1) Вы скрываете курсор по умолчанию в CSS:

html, body {cursor:none;}    

2) Вы создаете два разных div (один для самого курсора и один для следа) и стилизуете их:

<div id="mouse_cursor" class="mouse_cursor"></div>
<div id="mouse_trail" class="mouse_trail"></div>

3) Вы создаете логику для каждого из них:

function moveCursor(e) {
    $('#mouse_cursor').css({'left' : e.pageX,'top' : e.pageY });
}
$(window).on('mousemove', moveCursor);

function moveTrail(e) {
    TweenMax.to('#mouse_trail', 0.35, {
    css: {left: e.pageX,top: e.pageY},
    ease:SlowMo.easeIn
    }
)};
$(window).on('mousemove', moveTrail);

(В моем случае эффект следа создается с помощью GSAP от Greensock).

Теперь ... это прекрасно работает, пока стиль курсора не изменился. Вот скрипка, для вашей справки: https://jsfiddle.net/collederfomento/jvy1zfg8/27/

---

Я бы хотел изменить стиль курсора, как только он наведет определенные элементы, и вот тут я столкнулся с несколькими проблемами.

Я попытался сделать следующее:

1) Создайте функцию, связанную с событиями mouseenter \ mouseover, которая добавляет класс к курсору, если он наводит курсор на элемент:

$(".hover").bind( "mouseenter mouseover", function() {
    $("#mouse_cursor").addClass("mouse_cursor_hover");
});

2) ... а затем вторая функция, которая удаляет класс, когда курсор больше не наводит элемент:

$(".hover").mouseleave(function() {
    $("#mouse_cursor").removeClass("mouse_cursor_hover");
});

3) И наконец, конечно, я добавил стиль для курсора "hover":

.mouse_cursor_hover {width:300px;height:300px;}

Как вы можете видеть в этой скрипке (https://jsfiddle.net/collederfomento/z4e1qjbc/13/), событие hover не срабатывает должным образом, и курсор мыши мигает.

Я испробовал несколько других подходов (используя прослушиватель событий Javascript вместо вышеупомянутых функций, используя свойство css вместо переключения класса и т. Д.), Но все они ведут себя одинаково.

Что любопытно, так это то, что если я уберу функции, которые заставляют курсоры двигаться, то событие hover обрабатывается без ошибок. Я полагаю, что сочетание этих двух функций вызывает проблему, но я понятия не имею, почему (или как ее решить).

Answer 1

Я думаю, что курсор и элементы следа мешают событиям наведения. Даже при том, что они имеют высокий z-индекс, браузер все равно должен принимать их во внимание, чтобы выяснить, какой элемент на самом деле попадает. В конце концов, курсор мыши все еще движется над ними, так как они не «реальные», а фактические элементы, расположенные в этом месте.

Добавление pointer-events ни к одному из них, похоже, по большей части не решает проблему (проверено в Chrome и Firefox, в обоих случаях она значительно улучшилась), поэтому, пожалуйста, попробуйте:

.mouse_cursor,
.mouse_trail {
  pointer-events:none; 
}

https://jsfiddle.net/aur39py4/1/

Я предполагаю, что вам не понадобится какой-либо эффект наведения на курсор и трейлинг, так что установка pointer-events:none не должна оказывать негативного влияния на все остальное, что вы делаете на странице.