跨浏览器自定义光标样式

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-部分-moz-zoom-in;意味着它仅适用于 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-占很多浏览器，包括移动浏览器（对于这种用途，可能不需要它），这非常有用并且可以大大缩短时间。