Question

我有许多heroshot图像，点击时有一个模态弹出窗口。每当它移动到图像上时，我都试图让光标变成放大镜。即使我的magnify.cur出现在正确的位置，以下CSS似乎也无效。

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

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

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

Answer 1

您的问题可能是游标网址在Firefox for Mac中无效。

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

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

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

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

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字符串与apostrohes一起使用会怎样？

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')}

自定义光标图像CSS

6 个答案: