CSS光标位置属性在Safari中不起作用

Question

我正在显示光标的自定义图像。我正在使用 jQuery 在 mousedown 上交换光标图像，并手动将光标的 x 和 y 属性设置为图像的宽度和高度，以使图像看起来好像从底部的注册点旋转- 图片右侧。

相关的CSS是：

#face-container {
     cursor: url(../img/cursor_eel.png) 52 128, auto;
}

#face-container.punching {
    cursor: url(../img/cursor_eel_rotated.png) 127 127, auto;
}

jQuery 在 mousedown 上添加“punching”类，在 mouseup 上删除它。

在 Chrome 和 Firefox 中，这可以按预期工作 - 图像显示为按 CSS 中指定的 x 和 y 值移动，并且在 mousedown 时，光标图像似乎围绕右下角的注册点（尾部鳗鱼）。

在 Safari 9.0.1 (Mac OS 10.10.5) 中，它似乎不接受 x 和 y 值，因此图像出现在光标位置的左上角，而在 mousedown 时，光标图像似乎围绕左上角的注册点（鳗鱼的鼻子）旋转。

如何让 Safari 按指定移动光标图像位置并使鼠标按下效果与 Chrome 中一样？

Full demo here

Github repository here

Answer 1

看起来 Safari 计算光标图像大小与热点位置的方式与其他浏览器不同。将其设置为与图像大小完全相同是行不通的。

例如，对于 50px x 50px 的图像，如果您将光标位置设置为 50 50，它会在 Safari 上将其视为 0 - 可能只是忽略它。在 Chrome 上，它会将其设置为实际图像大小，如果数字大于实际图像大小，则事件。

见：https://jsfiddle.net/bb335rgk/1/

但是将它设置为比实际图像大小小一个像素，它会接受它。就您而言，由于您不必那么精确，因此可能就足够了。像这样：

#face-container {
     cursor: url(../img/cursor_eel.png) 51 127, auto;
}

#face-container.punching {
    cursor: url(../img/cursor_eel_rotated.png) 126 126, auto;
}