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

Posted 2023-05-07

【中文标题】CSS光标位置属性在Safari中不起作用

【英文标题】：CSS cursor position attribute not working in Safari

【发布时间】：2016-03-02 03:22:27

【问题描述】：

我正在显示光标的自定义图像。我正在使用 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

【问题讨论】：

旋转似乎在我电脑上的 Safari 中运行良好。我已经读到 Safari 中的光标遇到的一些问题通过打开一个新选项卡或重新启动浏览器来修复它。有些挂断了某种形式..

@danjah 打开一个新选项卡并重新启动浏览器并没有为我解决这个问题。我还用动画更新了问题，显示了我在 Chrome 和 Safari 中看到的结果。

尝试将单位度量添加到值 - 52px 128px 和 127px 127px

@Vucko 试过了，没有调整 Safari 中的光标位置 - 它也使光标图像不出现。

【参考方案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;

【讨论】：

做到了！只要 *** 允许我（17 小时），我就会奖励赏金。

谢谢@Julien，我从来没想过！