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

Question

我正在显示光标的自定义图像。我使用 jQuery 在 mousedown 上交换光标图像，我手动将光标的 x 和 y 属性设置为图像的宽度和高度，这样看起来就好像图像从配准旋转指向图像的bottom-right。

相关的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" class 并在 mouseup 时删除它。

在 Chrome 和 Firefox 中，这按预期工作 - 图像看起来移动了 CSS 中指定的 x 和 y 值，并且在鼠标按下时，光标图像似乎围绕 a 旋转注册点在bottom-right（鳗鱼的尾巴）。

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

如何让 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;
}

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

CSS cursor position attribute not working in Safari

css

cursor-position