3

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

cursor: none;

当它悬停在元素上时。

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

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

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

display: none;

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

display: block;

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

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

感谢您的帮助。

4

1 回答 1

3

问题

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

快速移动鼠标时看到鼠标指针的原因是您偶尔会将光标悬停在指针上，因此.hoverbox:hover不会应用样式。

在您的mousemove事件绑定中，将 css 样式cursor: none 也添加到指针，即使不小心移动到手上，您也不应该再看到鼠标指针。将 应用于cursor: nonein .pointer:hoverCSS 也不起作用。

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

演示- 在指针上方隐藏光标

编辑
我无法cursor: url()在提琴手中工作，但我猜这主要是因为提琴手呈现输出槽fiddle.jshell.net并且图像可能必须在服务器本地。

但是，如果您只想使用指针，您也可以随时使用cursor: pointer style。

CSS：

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

演示- 使用默认指针光标

于 2012-08-24T12:07:22.350 回答