自定义光标图像CSS

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

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

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

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

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

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

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

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

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

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

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