自定义光标图像 CSS

Posted 2023-03-06

【中文标题】自定义光标图像 CSS

【英文标题】：Custom Cursor Image CSS

【发布时间】：2010-09-25 02:45:25

【问题描述】：

我有许多 heroshot 图像，单击时会弹出模式。 我试图让光标在图像上移动时变成放大镜。即使我的magnify.cur 出现在正确的位置，以下 CSS 似乎也不起作用。

a.heroshot img 
  cursor:url(/img/magnify.cur), pointer;

有没有人做过类似的事情？如果存在 javascript 解决方案，我不介意。

编辑：它适用于 Safari，但不适用于 Firefox。

【问题讨论】：

相关***.com/questions/6577326/…

【参考方案1】：

您的问题可能是光标 URL 在 Firefox for Mac 中不起作用。

您可以在 Firefox 上使用 -moz-zoom-in 关键字获得相同的效果。

cursor:url(/img/magnify.cur), -moz-zoom-in, auto;

这将显示 magnify.cur、Mozilla 特定的缩放光标或系统默认光标。使用浏览器支持的列表上的第一个光标。

您还可以看到不同浏览器支持的list of cursor keywords。

【讨论】：

此规则不适用于 Firefox（用 FF7 测试）。浏览器将其视为语法错误并丢弃该规则（可在 Web 控制台上查看）。 Chrome 也不显示自定义图标（IE8 显示自定义图标）。 MDN 定义了此规则的语法，即[<url>,]* keyword，keyword 是 CSS 定义的光标值之一，例如 auto。

【参考方案2】：

这成功了:)

a.heroshot img 
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;

【参考方案3】：

更新：现在大多数浏览器都原生支持放大图标，因此您可以使用这个 CSS：

cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;

【讨论】：

最好在属性定义的末尾加上分号。

【参考方案4】：

如果用撇号括起来 url 字符串会怎样？

a.heroshot img 
cursor:url('/img/magnify.cur'), pointer;

另见http://www.w3schools.com/CSS/pr_class_cursor.asp

【讨论】：

URL CSS 属性中的引号是可选的 [w3.org/TR/CSS21/syndata.html#uri] 和 w3schools 是一个糟糕的资源，因为它充满了误导性、非标准信息和错误。

【参考方案5】：

（基于 Kevin Borders 的回复）

正确的后备顺序如下

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;

经过测试：Firefox 47、Chrome 51、Opera 36、Edge 13 和 IE11。

【参考方案6】：

我的侧 url 属性以下列方式为光标工作

 #myidcursor:url('myimage.png') , auto

但在这里我认为图像大小有问题。因为如果我使用 32*32 或以下的尺寸，那么它就完美了。

自定义光标的 URL 的逗号分隔列表。注意：总是在列表的末尾指定一个通用游标，以防没有任何 URL 定义的游标可以使用

 #myidcursor:url('myimage.png') , auto
 #myidcursor:url('myimage.png') ,url('myimage2.gif') , auto etc

如果只放这个就不行了

 #myidcursor:url('myimage.png')