自定义光标图像 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/336925/
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
Custom Cursor Image CSS
提问by Chris J Allen
I have a number of heroshot images, that have a modal popup when clicked.
I'm trying to get my cursor to turn into magnifying glass whenever it is moved over the image. The following CSS does not appear to work even though my magnify.curis present in the right location.
我有许多 heroshot 图像，单击时会弹出模态。我试图让光标在图像上移动时变成放大镜。即使 mymagnify.cur出现在正确的位置，以下 CSS 似乎也不起作用。
a.heroshot img {
cursor:url(/img/magnify.cur), pointer;
}
Has anyone ever done anything similar? I don't mind a JavaScript solution if one exists.
有没有人做过类似的事情？如果存在 JavaScript 解决方案，我不介意。
EDIT: It works in Safari, but not in Firefox.
编辑：它适用于 Safari，但不适用于 Firefox。
回答by isani
Your problem may be that cursor URLs don't work in Firefox for the Mac.
您的问题可能是光标 URL 在 Mac 版 Firefox 中不起作用。
You can get the same effect on Firefox by using the -moz-zoom-inkeyword.
您可以通过使用-moz-zoom-in关键字在 Firefox 上获得相同的效果。
cursor:url(/img/magnify.cur), -moz-zoom-in, auto;
This will show magnify.cur, the Mozilla-specific zoom cursor or a system default cursor. The first cursor on the list that the browser supports is used.
这将显示 magnify.cur、Mozilla 特定的缩放光标或系统默认光标。使用浏览器支持的列表中的第一个光标。
You can also see a list of cursor keywordssupported by different browsers.
您还可以查看不同浏览器支持的光标关键字列表。
回答by Chris J Allen
This did the trick :)
这成功了:)
a.heroshot img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}
回答by Kevin Borders
UPDATE:The magnify icon is now supported natively in most browsers, so you can just use this CSS:
更新：现在大多数浏览器都支持放大图标，所以你可以使用这个 CSS：
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
回答by activout.se
What if you enclose the url string with apostrohes?
如果用撇号将 url 字符串括起来会怎样？
a.heroshot img {
cursor:url('/img/magnify.cur'), pointer;
}
回答by SandroMarques
(Based on Kevin Borders response)
（基于 Kevin Borders 的回应）
The right fallback order is the following
正确的回退顺序如下
a.heroshot img {
cursor: url(/img/zoom_in.png), url(/img/zoom_in.cur), pointer;
cursor: url(/img/zoom_in.png), -moz-zoom-in;
cursor: url(/img/zoom_in.png), -webkit-zoom-in;
}
Tested with: Firefox 47, Chrome 51, Opera 36, Edge 13 and IE11.
测试：Firefox 47、Chrome 51、Opera 36、Edge 13 和 IE11。
回答by user3335780
My side url property is working for cursor in following way
我的侧 url 属性按以下方式为光标工作
#myid{cursor:url('myimage.png') , auto}
But here I think image size issue. Because If I use 32*32 size or below this then this work perfectly.
但在这里我认为图像大小问题。因为如果我使用 32*32 或以下的尺寸，那么这个工作完美。
A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
自定义游标的 URL 的逗号分隔列表。注意：始终在列表末尾指定通用游标，以防无法使用任何 URL 定义的游标
#myid{cursor:url('myimage.png') , auto}
#myid{cursor:url('myimage.png') ,url('myimage2.gif') , auto} etc
If you put only this then it will not work
如果你只放这个，那么它将不起作用
#myid{cursor:url('myimage.png')}
