css - 跨浏览器自定义光标样式

Question

我用 img 标签显示世界地图。我将图像映射与其相关联以超链接某些区域。我覆盖了一个带边框的 div 框，指示可以单击和缩放某个区域。

现在为了向用户展示它执行的操作，我希望光标变为放大镜形状。我浏览了网络，发现了一些适用于 firefox 和 ie6-8 的东西:

#zoomregion:hover { cursor: url('templates/test/styles/images/magnify.cur'), -moz-zoom-in; }

不幸的是，opera、chrome 和 ie9 会忽略它并显示默认值(即:指针)。如何使用跨浏览器自定义光标图标？

Answer 1

-moz-zoom-in; 的 -moz- 部分意味着它仅适用于 Mozilla，要使其跨浏览器，您需要所有标签在相同的 id 标签 css 中:

#zoomregion:hover { 
    cursor: url('templates/test/styles/images/magnify.cur');
    -webkit-zoom-in;
    -moz-zoom-in;
    -ie-zoom-in;
    -ms-zoom-in;
    -o-zoom-in;
}

-webkit- 考虑了很多浏览器，包括移动设备(对于此用途，它可能不需要)，这非常有用并且缩短了很多时间。