自定义光标图像CSS

Question

我有一些heroshot图像,点击时有一个模态弹出窗口.每当它移动到图像上时,我都试图让光标变成放大镜.即使我magnify.cur位于正确的位置,以下CSS似乎也不起作用.

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

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

编辑:它适用于Safari,但不适用于Firefox.

Answer 1

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

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

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

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

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

此规则不适用于Firefox(使用FF7测试).浏览器将其视为语法错误并丢弃规则(可在Web控制台上看到).Chrome也不会显示自定义图标(IE8会显示自定义图标).[MDN](https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property)定义了此规则的语法,即`[<url>,]*keyword`,`keyword`是CSS定义的游标值之一,比如`auto`. (3认同)

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;