是否可以将鼠标光标放在元素后面或者鼠标光标是否有 z 索引？

当鼠标悬停在某个元素上时，我想用自定义图像替换鼠标光标。我通过首先关闭鼠标光标来做到这一点

cursor: none;

当它悬停在元素上时。

然后我读出悬停元素上的光标位置，并将图形的 css 位置设置为光标位置并稍微偏移，以便鼠标光标不在图形上方，但仍在悬停区域上方。

我在这里做了一个小提琴：http://jsfiddle.net/TimG/6XeWK/

现在可以安静地工作了。问题是，当您非常快地移动鼠标时，鼠标光标离开悬停区域并在图像上“滑动”，这当然使得无法确定鼠标相对于悬停区域的位置（非常快地移动到左下角）在黑色悬停区域）。我可以通过将图形设置为来使其更难滑出悬停区域

display: none;

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

display: block;

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

那么：有什么办法可以防止这种情况发生吗？或者有没有办法将鼠标光标放在手后面？有点像为鼠标光标设置 z 索引（我的猜测是，这是不可能的，因为它不是 DOM 元素）？

感谢您的帮助。

Question

有没有办法将鼠标光标放在手后面？

快速移动鼠标时看到鼠标指针的原因是您偶尔会看到光标over指针，因此.hoverbox:hover未应用样式。

In your mousemove事件绑定添加CSS样式cursor: none also到指针，即使不小心移动到手上，您也不应该再看到鼠标指针。应用cursor: none to the .pointer:hover在 CSS 中则效果不佳。

$(".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');
});

DEMO- 指针悬停时隐藏光标

Edit
我无法得到cursor: url()在 fiddler 中工作，但我猜这主要是因为 fiddler 渲染输出槽fiddle.jshell.net并且图像可能必须位于服务器本地。

但如果你只想使用指针，你总是可以使用cursor: pointer style以及。

CSS:

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

DEMO- 使用默认指针光标