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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:40:31  来源:igfitidea点击:

Magnifying Glass (zoom) Cursor over image

csscursorfancybox

提问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 .curand not a .giffile, so it will be like

为此,您需要使用游标文件.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;
}