跨浏览器自定义光标样式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨浏览器自定义光标样式相关的知识,希望对你有一定的参考价值。

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

现在向用户显示它这样做我希望光标变为放大镜形状。我浏览了网页,发现了一些在firefox和ie6-8中运行的东西:

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

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

答案

-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-占了很多浏览器,包括移动设备(对于这种用途,它可能不需要),这非常有用并且缩短了很多东西。

以上是关于跨浏览器自定义光标样式的主要内容,如果未能解决你的问题,请参考以下文章

CSS---cursor 鼠标指针光标样式(形状)

cursor url 自定义鼠标样式

VS Code中自定义Emmet代码片段

代码片段如何使用CSS来快速定义多彩光标

超简单的自定义个性化网页鼠标光标样式 html+css+js

css 如何改变鼠标图标