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添加＆＃34;打孔＆＃34; mousedown上的类，并在mouseup上删除它。

在Chrome和Firefox中，这可以正常工作 - 图像显示为移动了CSS中指定的x和y值，而在mousedown上，光标图像似乎围绕右下方的注册点（尾部）旋转鳗鱼）。

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

如何让Safari按指定的方式移动光标图像位置，并使mousedown效果像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;
}