CSS光标位置属性在Safari中无法工作

Question

CSS光标位置属性在Safari中无法工作

8

我将展示一个自定义的光标图像。我使用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在鼠标按下时添加“punching”类，鼠标松开时删除该类。在Chrome和Firefox中，这正常工作 - 图像显示为CSS中指定的x和y值偏移，并且在鼠标按下时，光标图像似乎围绕右下角（鳗鱼尾巴）的注册点旋转。

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

我该如何让Safari按照指定的位置移动光标图像并使鼠标按下效果与Chrome相同？

完整演示在这里

Github代码库在这里

- Mike Eng

旋转似乎在我的电脑上的Safari上运行良好。我曾经阅读到，有些人在Safari中遇到光标问题时，通过打开一个新标签或重新启动浏览器来解决。可能是某种卡顿问题。 - danjah

@danjah 在我的电脑上打开新标签页和重新启动浏览器都没有解决这个问题。我还在问题中更新了一些动画，展示了我在Chrome和Safari中看到的结果。 - Mike Eng

尝试为值添加单位 - 52px 128px 和 127px 127px - Vucko

@Vucko 尝试过了，但在Safari中并未调整光标位置，同时也使光标图像消失。 - Mike Eng

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Julien Grégoire · Accepted Answer

看起来 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;
}