自定义光标图像CSS

我有一些heroshot图像，点击时有一个模式popup。 我试图让我的光标变成放大镜，只要它在图像上移动。 即使我的magnify.cur存在于正确的位置，下面的CSS也不起作用。

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

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

编辑 ：它在Safari中，但不是在Firefox中。

Answer 1

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

您可以使用-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

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

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

Answer 4

如果你把这个urlstring加上了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; } 

经testing：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')}