是否可以将鼠标光标放在元素后面或者鼠标光标是否具有z-index？

Question

当鼠标悬停在某个元素上时，我想用自定义图像替换鼠标光标。我是通过先用

设置鼠标光标来实现的

cursor: none;

当它悬停元素时。

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

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

现在它很安静。问题是当您快速移动鼠标时，鼠标光标离开悬停区域并在图像上“滑动”当然使得无法确定相对于悬停区域的鼠标位置（向左下方移动非常快）在黑色的悬停区域）。通过将图形设置为

，我可以让它更难滑出悬停区域

display: none;

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

display: block;

一次。不幸的是，它并没有完全阻止这个问题。

所以：有什么方法可以阻止这种情况吗？或者有没有办法将鼠标光标放在手后？有点像为鼠标光标设置z-index（我的猜测是，它不可能，因为它不是DOM元素）？

请求任何帮助。

Answer 1

问题

  

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

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

在mousemove事件绑定中，将cursor: none 也的css样式添加到指针中，即使意外移动到指针上，也不应再看到鼠标指针手。将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');
});

DEMO - 在指针

上时隐藏光标

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

但如果你想要使用的只是一个指针，你也可以随时使用cursor: pointer style。

CSS：

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

DEMO - 使用默认指针光标