Question

I have a number of heroshot images, that have a modal popup when clicked. I m trying to get my cursor to turn into magnifying glass whenever it is moved over the image. The following CSS does not appear to work even though my magnify.cur is present in the right location.

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

Has anyone ever done anything similar? I don t mind a JavaScript solution if one exists.

编辑: 在Safari中可以正常运行，但在Firefox中不能。

Answer 1

你的问题可能是Firefox的光标URL在Mac上无法正常工作。

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

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

这将会显示放大.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 )}

友情链接