放大镜(缩放)光标在图像上方

Question

我正在寻找一种解决方案,将光标悬停在Fancybox图像上时将光标更改为放大镜.

就像在Pinterest上一样,当你悬停图像时(使用chrome).

到目前为止,我有这个没有跨浏览器支持.

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

有没有更好的方法来解决这个问题？

Answer 1

您可以使用:

.picture img{
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in;
}

Answer 2

为此你需要使用游标文件.cur而不是~~.gif~~文件,所以它会是这样的

.picture img {
    cursor:url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in;
}

无污染的绝佳解决方案 (5认同)
澄清@ Mr.Alien的答案:似乎没有跨浏览器内置的"放大镜光标",如http://css-tricks.com/almanac/properties/c/cursor/`所示 - webkit-zoom-in`仅限webkit (2认同)

Answer 3

根据caniuse.com的说法,相关的浏览器现在都支持cursor: zoom-in;IE以外的其他浏览器.w3schools的IE使用率下降到6.1%......时钟已经开始了IE!

.picture img{
   cursor: zoom-in;
}