鼠标指针是否可以置于元素后方？或者说鼠标指针是否有z-index属性？

Question

鼠标指针是否可以置于元素后方？或者说鼠标指针是否有z-index属性？

3

当鼠标悬停在特定元素上时，我想用自定义图像替换鼠标光标。首先通过设置鼠标光标关闭来实现。

cursor: none;

当鼠标悬停在元素上时。

然后，我读取鼠标指针在悬停元素上的位置，并将图形的CSS位置设置为带有轻微偏移的鼠标指针位置，以便鼠标指针不在图形上方，而仍在悬停区域上。

我在这里创建了一个演示： http://jsfiddle.net/TimG/6XeWK/

现在它工作得很好。问题在于，当您移动鼠标非常快时，鼠标指针会离开悬停区域并“滑过”图像，这当然使确定鼠标位置相对于悬停区域变得不可能（在黑色悬停区域的左下方快速移动）。我可以通过将图形设置为

display: none;

在更改图像的CSS位置之前和之后，将其设置为。

display: block;

再次出现了这个问题。不幸的是，它并不能完全防止这个问题。

那么：有没有什么方法可以防止这种情况？或者有没有一种方法可以将鼠标光标放在手指后面？就像为鼠标光标设置z-index一样（我猜想这不可能，因为它不是DOM元素）？

感谢任何帮助。

- TimG

2

你知道在CSS中cursor:可以接受一个图片的URL吗？ - adeneo

@adeno：+1。你说的应该可以行得通。但在 Fiddler 中很难测试。我在 Fiddler 中尝试过，即使使用 Fiddler 本地的图像也无法工作。我认为这是因为 Fiddler 在呈现输出时使用了 fiddle.jshell.net。但是在 Fiddler 之外，按照你所说的应该可以工作。 - Nope

@adeneo：是的，我知道。不幸的是，我无法真正使用它，因为指针图形在鼠标进入悬停区域之前就可见了。因此，一旦鼠标进入悬停区域，已经作为DOM元素存在的指针图形就成为了鼠标光标。 - TimG

2

@FrançoisWahl - 我自己花了很多时间尝试使用自定义光标创建一个fiddle，但是没有成功。这就是为什么我只是将其作为评论发布，无法使其工作，但我以前在生产网站上做过，并且没有任何问题？至于指针图形，为什么不只是有一个带有底部指针的图像，在鼠标进入时隐藏图像并使用自定义光标呢？ - adeneo

@adeno：这是一个值得尝试的好主意……我需要在DOM中设置图像的CSS为最后的鼠标位置，并在离开悬停区域时再次显示它……我会尽快尝试并更新我的问题解决方案。 - TimG

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nope · Accepted Answer

问题

有没有一种方法可以将鼠标光标放在手指后面？

当你快速移动鼠标时，你会看到鼠标指针，这是因为你偶尔会将光标移到指针上，因此.hoverbox:hover样式不会应用。

在你的mousemove事件绑定中添加css样式cursor: none 同时应用于指针，即使意外移动到手上，你也不会再看到鼠标指针。将cursor: none应用于CSS中的.pointer:hover也不起作用。

$(".hoverBox").mousemove(function(e) {
    var tWidth = $(window).width();
    var position = $(this).position();
    var fingerPosition = position.top + e.clientY + 15;
    var fingerWidth = $(this).parent().find('.pointer').width();

    $('.pointer').css('display', 'none').css('top', fingerPosition).css('left', e.clientX - fingerWidth - 15).css('display', 'block').css('cursor', 'none');
});

演示 - 当指针悬停时隐藏光标

编辑
我无法在Fiddler中使用cursor: url()，但我猜这主要是因为Fiddler通过fiddle.jshell.net渲染输出，而图像可能必须是服务器本地的。

但如果您只想使用指针手，则始终可以使用cursor: pointer style。

CSS：

.hoverBox {
    width: 400px;
    height: 300px;
    background: black;
    cursor: pointer;
}

鼠标指针是否可以置于元素后方？或者说鼠标指针是否有z-index属性？

问题

演示 - 当指针悬停时隐藏光标

演示 - 使用默认的指针光标