Css 放大镜（缩放）光标在图像上

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

与Pinterest一样，当您将图像悬停（使用chrome）时

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

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

---

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

为此，您需要使用光标文件

.cur

，而不是

.gif

文件，因此

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

您可以使用：

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

据介绍，目前相关浏览器都支持

光标：放大当然除了IE。W3学校的IE使用率降至6.1%。。。时钟滴答作响

.picture img{
   cursor: zoom-in;
}

我已经找到了一种让光标在图像上工作的方法，但它从来没有像光标一样工作过



*{框大小：边框框；}
.img放大镜容器{
位置：相对位置；
}
.img放大镜{
位置：绝对位置；
边框：3倍实心#000；
边界半径：50%；
光标：无；
/*设置放大镜的大小：*/
宽度：100px；
高度：100px；
}
功能放大（imgID、缩放）{
var img，玻璃，w，h，bw；
img=document.getElementById（imgID）；
/*创建放大镜：*/
glass=document.createElement（“DIV”）；
设置属性（“类”、“img放大镜”）；
/*插入放大镜：*/
img.parentElement.insertBefore（玻璃，img）；
/*设置放大镜的背景属性：*/
glass.style.backgroundImage=“url（'“+img.src+”）”；
glass.style.backgroundRepeat=“无重复”；
glass.style.backgroundSize=（img.width*zoom）+“px”+（img.height*zoom）+“px”；
体重=3；
w=玻璃偏移网络宽度/2；
h=玻璃。离光/2；
/*当有人将放大镜移到图像上时，执行以下功能：*/
玻璃。添加显示器（“鼠标移动”，移动放大镜）；
img.addEventListener（“mousemove”，移动放大镜）；
/*以及触摸屏：*/
玻璃。添加显示器（“触摸移动”，移动放大镜）；
img.addEventListener（“触摸移动”，移动放大镜）；
功能放大镜（e）{
变量pos，x，y；
/*防止在图像上移动时可能发生的任何其他操作*/
e、 预防默认值（）；
/*获取光标的x和y位置：*/
pos=getCursorPos（e）；
x=位置x；
y=位置y；
/*防止放大镜位于图像外部：*/
如果（x>img.width-（w/zoom））{x=img.width-（w/zoom）；}
如果（ximg.height-（h/zoom））{y=img.height-（h/zoom）；}
如果（y
/*启动放大功能
使用图像id和放大镜的强度：*/
放大（“myimage”，3）；
无污染相关伟大解决方案澄清@Mr.Alien的答案：似乎没有跨浏览器内置的“放大镜光标”，如
-webkit zoom in
是webkit Only吗？更清楚的是：@Mr.Alien使用绝对路径，因为IE不支持光标图像的相对路径。这适用于较新的FF。。。我喜欢这个光标：-moz放大；光标：-webkit放大；光标：放大；