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

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

现在...只要光标样式没有改变，这就可以完美地工作。这是一个 fiddle ，供您引用:https://jsfiddle.net/collederfomento/jvy1zfg8/27/

---

但是，我想在鼠标悬停在特定元素上时更改光标的样式，这就是我遇到一些问题的地方。

我尝试这样做的方式如下:

1) 创建一个绑定(bind)到 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;}

如您在此 fiddle (https://jsfiddle.net/collederfomento/z4e1qjbc/13/) 中所见，悬停事件未正确触发，并且鼠标光标闪烁。

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

奇怪的是，如果我删除使光标移动的函数，那么悬停事件将得到完美处理。我相信这两个功能的组合导致了这个问题，但我不知道为什么(或如何解决)。

Answer 1

我认为光标和拖尾元素干扰了悬停事件。即使它们的 z-index 很高，浏览器仍然必须考虑它们才能确定哪个元素实际上被悬停了。毕竟鼠标光标仍然在它们上面移动，因为它们不是“真正的”光标，而是位于该位置的实际元素。

将 pointer-events none 添加到它们两个似乎在很大程度上解决了问题(在 Chrome 和 Firefox 中检查过，这两个似乎都有显着改善)，所以请试一试:

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

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

我假设您不需要对光标和拖尾本身产生任何悬停效果，因此设置 pointer-events:none 应该不会对其余部分产生任何不利影响你在页面上做的。