Javascript\Jquery 鼠标光标 - 悬停项目时不一致

我想用自定义光标替换我网站上的鼠标光标，该光标由两个元素组成：

• 光标；
• 跟随光标并落后于光标的轨迹。

使用 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);

（在我的例子中，轨迹效果是使用 Greensock GSAP 制作的）。

现在...只要光标样式不改变，这就可以完美工作。这是一个小提琴，供您参考：https://jsfiddle.net/collederfomento/jvy1zfg8/27/ 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）最后，当然，我添加了“悬停”光标的样式：

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

正如你在这个小提琴中看到的（https://jsfiddle.net/collederfomento/z4e1qjbc/13/ https://jsfiddle.net/collederfomento/z4e1qjbc/13/）悬停事件未正确触发，并且鼠标光标闪烁。

我尝试了其他几种方法（使用 Javascript 事件监听器而不是上面提到的函数，使用 css 属性而不是切换类等），但它们的行为方式都是相同的。

奇怪的是，如果我删除使光标移动的函数，那么悬停事件就可以完美地处理。我相信这两个函数的组合导致了这个问题，但我不知道为什么（或如何解决它）。

我认为光标和轨迹元素干扰了悬停事件。即使它们处于较高的 z-index，浏览器仍然必须考虑它们以找出实际悬停的元素。毕竟，鼠标光标仍然在它们上方，因为它们不是“真正的”光标，而是位于该位置的实际元素。

Adding pointer-events他们俩似乎都没有解决大部分问题（在 Chrome 和 Firefox 中检查过，似乎都有显着改善），所以请尝试一下：

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

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

我假设您不需要对光标和轨迹本身进行任何形式的悬停效果，因此设置pointer-events:none不应对您在页面上执行的其他操作产生任何不利影响。