自定义光标图像CSS [英] Custom Cursor Image CSS

问题描述

我有一些heroshot图片，点击时有一个模态弹出窗口。
我试图让我的光标变成放大镜，无论什么时候移动图像。以下CSS似乎不工作，即使我的 magnify.cur 存在于正确的位置。

  a.heroshot img {
 cursor：url（/img/magnify.cur），pointer; 
} 
  

有没有人做过类似的事？

编辑：它可以在Safari中使用，但不能在Firefox中使用。

解决方案

您的问题可能是光标网址在Mac的Firefox中无法使用。

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

  cursor：url（/img/magnify.cur），-moz-zoom-in，auto; 
  

这将显示magnify.cur，Mozilla专用缩放光标或系统默认光标。

您还可以查看不同浏览器支持的游标关键字列表。

I have a number of heroshot images, that have a modal popup when clicked. I'm trying to get my cursor to turn into magnifying glass whenever it is moved over the image. The following CSS does not appear to work even though my magnify.cur is present in the right location.

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

Has anyone ever done anything similar? I don't mind a JavaScript solution if one exists.

EDIT: It works in Safari, but not in Firefox.

解决方案

Your problem may be that cursor URLs don't work in Firefox for the Mac.

You can get the same effect on Firefox by using the -moz-zoom-in keyword.

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

This will show magnify.cur, the Mozilla-specific zoom cursor or a system default cursor. The first cursor on the list that the browser supports is used.

You can also see a list of cursor keywords supported by different browsers.

这篇关于自定义光标图像CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！