css - 自定义光标图像 CSS

Question

我有许多 heroshot 图像，单击时会弹出一个模态弹出窗口。 我试图让我的光标在图像上移动时变成放大镜。即使我的 magnify.cur 出现在正确的位置，以下 CSS 似乎也不起作用。

a.heroshot img {
  cursor:url(/img/magnify.cur), pointer;
}

有没有人做过类似的事情？如果存在 JavaScript 解决方案，我不介意。

编辑:它适用于 Safari，但不适用于 Firefox。

Answer 1

您的问题可能是光标 URL 在 Firefox for Mac 中不起作用。

您可以在 Firefox 上使用 -moz-zoom-in 关键字获得相同的效果。

cursor:url(/img/magnify.cur), -moz-zoom-in, auto;

这将显示 magnify.cur，Mozilla 特定的缩放光标或系统默认光标。使用浏览器支持的列表中的第一个光标。

您还可以看到 list of cursor keywords不同浏览器支持。