Javascript \ Jquery鼠标光标-悬停项目时出现不一致 [英] Javascript\Jquery mouse cursor - Inconsistencies when hovering items

问题描述

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

I'd like to replace the mouse cursor on my website with a custom one, composed of two elements:

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

使用jquery做到这一点非常容易.

Doing that with jquery is extremely easy.

1)您在CSS中隐藏了默认光标:

1) You hide the default cursor in CSS:

html, body {cursor:none;}    

2)您创建两个不同的div(一个用于光标本身，一个用于路径)并设置它们的样式:

2) You create two different divs (one for the cursor itself and one for the trail) and style them:

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

3)您为其中每一个创建逻辑:

3) You create the logic for each one of them:

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产生的.)

(In my case the trail effect is made using Greensock's GSAP).

现在...只要不更改光标样式，此方法就可以完美地工作.这是一个小提琴，供您参考: https://jsfiddle.net/collederfomento/jvy1zfg8/27/

Now... this works perfectly as long as the cursor style isn't changed. Here's a fiddle, for your reference: https://jsfiddle.net/collederfomento/jvy1zfg8/27/

但是，一旦光标悬停在特定元素上，我想更改其样式，这就是我遇到的一些问题.

I'd like to change the style of the cursor once it hovers specific elements, however, and that's where I am encountering a few issues.

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

The way I have attempted to do that is the following:

1)创建绑定到mouseenter \ mouseover事件的函数，如果该事件将鼠标悬停在元素上，则该类会向该游标添加一个类:

1) Create a function bound to the mouseenter \ mouseover events that adds a class to the cursor if it's hovering the element:

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

2)...，然后是第二个函数，一旦光标不再将鼠标悬停在元素上，该函数将删除该类:

2) ... and then a second function that removes the class once the cursor is not hovering the element anymore:

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

3)最后，当然，我添加了悬停"光标的样式:

3) Lastly, of course, I added the style for the "hover" cursor:

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

您可以在此小提琴中看到( https://jsfiddle.net/collederfomento/z4e1qjbc/13/)悬停事件未正确触发，并且鼠标光标闪烁.

As you can see in this fiddle ( https://jsfiddle.net/collederfomento/z4e1qjbc/13/ ) the hover event is not firing properly, and the mouse cursor flickers.

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

I have tried several other approaches (using Javascript event listener rather than the above mentioned functions, using the css property rather than toggling a class, etc.) but they all behave in the same way.

好奇的是，如果我删除使光标移动的函数，那么将完美地处理悬停事件.我相信这两种功能的结合会导致此问题，但是我不知道为什么(或如何解决).

What's curious is that if I remove the functions that make the cursors move, then the hover event is handled flawlessly. I believe the combination of the two functions is causing the issue, but I have no clue why (or how to solve it).

推荐答案

我认为光标和拖尾元素正在干扰悬停事件.即使它们具有较高的z索引，浏览器仍必须考虑它们，以找出实际悬停的元素.毕竟，鼠标光标仍在它们上方，因为它们不是真实"光标，而是位于该位置的实际元素.

I think the cursor and the trail elements are interfering with the hover events. Even though they are at a high z-index, the browser still has to take them into account to figure out which element is actually getting hovered. The mouse cursor is still going over them after all, since they are not a "real" cursor, but actual elements positioned in that place.

在两者中均未添加 pointer-events 似乎大部分都可以解决该问题(已在Chrome和Firefox中进行了检查，两者均得到了明显改善)，因此请尝试一下:

Adding pointer-events none to both of them seems to fix the issue for the most part (checked in Chrome and Firefox, in both it seemed to significantly improve), so please give that a try:

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

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

我假设您将不需要对光标进行任何类型的悬停效果并自行跟踪，因此设置 pointer-events:none 不会对其余内容产生任何不利影响您正在页面上做.

I am assuming that you are not going to need any sort of hover effect on the cursor and trail themselves, so setting pointer-events:none should not have any adverse effects on the rest of what you’re doing on the page.

这篇关于Javascript \ Jquery鼠标光标-悬停项目时出现不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！