css - 自定义光标图像 CSS

Question

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

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

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

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

Answer 1

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

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

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

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

您还可以查看不同浏览器支持的光标关键字列表。

Answer 2

这成功了:)

a.heroshot img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}

Answer 3

更新：现在大多数浏览器都支持放大图标，所以你可以使用这个 CSS：

cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;

Answer 4

如果用撇号括起来 url 字符串怎么办？

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

另见http://www.w3schools.com/CSS/pr_class_cursor.asp

Answer 5

（基于 Kevin Borders 的回应）

正确的后备顺序如下

a.heroshot img {
    cursor: url(/img/zoom_in.png), url(/img/zoom_in.cur), pointer;  
    cursor: url(/img/zoom_in.png), -moz-zoom-in;  
    cursor: url(/img/zoom_in.png), -webkit-zoom-in;
}

测试：Firefox 47、Chrome 51、Opera 36、Edge 13 和 IE11。

Answer 6

我的侧 url 属性以下列方式为光标工作

 #myid{cursor:url('myimage.png') , auto}

但在这里我认为图像大小问题。因为如果我使用 32*32 或以下尺寸，那么这将完美运行。

自定义光标的 URL 的逗号分隔列表。注意：始终在列表末尾指定一个通用游标，以防没有任何 URL 定义的游标可以使用

 #myid{cursor:url('myimage.png') , auto}
 #myid{cursor:url('myimage.png') ,url('myimage2.gif') , auto} etc

如果你只放这个，那它就行不通了

 #myid{cursor:url('myimage.png')}