跨浏览器自定义光标样式

发布于 2024-11-18 22:58:55 字数 334 浏览 1 评论 0原文

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

现在，为了向用户展示它是这样做的，我希望光标更改为放大镜形状。我浏览了网络，发现一些可以在 firefox 和 ie6-8 中工作的东西：

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

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

原文

I display a world map by an img tag. I associate an image map with it to hyperlink some regions. I overlay a bordered box div indicating a certain region can be clicked and zoomed.

Now to show the user it does this I want the cursor to change to a magnifying glass shape. I looked through the web and found something that works in firefox and ie6-8:

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

Unfortunately opera,chrome and ie9 ignore it and show the default (i.e.: pointer). How can I use cross browser custom cursor icons?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心舞飞扬 2024-11-25 22:58:55

-moz-zoom-in; 中的 -moz- 部分表示它仅适用于 Mozilla，要使其跨浏览器，您需要将所有标记放在同一个中id tag 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- 适用于很多浏览器，包括移动浏览器（对于这种用途，可能不需要它），这非常有用并且可以大大缩短时间。

The -moz- part of the -moz-zoom-in; means that it's for Mozilla only, to make it cross browser, you need all of the tags in the same id tag 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- accounts for a lot of browsers, including mobile (which, for this use, it's probably not needed) which is very useful and shortens things a lot.

回复收藏 0 原文

~没有更多了~