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产生的。）

现在...只要不更改光标样式，此方法就可以完美工作。这是一个小提琴，供您参考：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/中所看到的那样，悬停事件无法正确触发，并且鼠标光标闪烁。

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

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

Answer 1

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

在两者中均未添加pointer-events似乎在很大程度上解决了该问题（已在Chrome和Firefox中进行了检查，两者均明显改善了），因此请尝试：

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

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

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

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

1 个答案: