CSS 放大镜(缩放)光标在图像上
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13171968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Magnifying Glass (zoom) Cursor over image
提问by Delos Chang
I'm looking for a solution to change the cursor to a magnifying glass upon hovering over a Fancybox image.
我正在寻找将光标悬停在 Fancybox 图像上时将光标更改为放大镜的解决方案。
Like on Pinterest, when you hover an image (using chrome).
就像在 Pinterest 上一样,当您悬停图像时(使用 chrome)。
So far I have this which doesn't have cross-browser support.
到目前为止,我有这个没有跨浏览器支持。
.picture img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}
Is there a better way to approach this problem?
有没有更好的方法来解决这个问题?
采纳答案by Mr. Alien
For that you need to use a cursor file .cur
and not a file, so it will be like.gif
为此,您需要使用游标文件.cur
而不是文件,所以它就像.gif
.picture img {
cursor:url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in;
}
回答by mezod
You can use:
您可以使用:
.picture img{
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
回答by Michael Tranchida
According to caniuse.com, the relevant browsers now all support cursor: zoom-in;
except IE of course. IE usage is down to 6.1% on w3schools... clock's a'ticking IE!
根据caniuse.com 的说法,现在相关的浏览器cursor: zoom-in;
当然都支持除了 IE。w3schools 上的 IE 使用率下降到 6.1%...时钟在滴答作响的 IE!
.picture img{
cursor: zoom-in;
}