CSS自定义光标在Firefox/Chrome中无法工作。

Question

我正在尝试使用以下图片创建自定义光标：

http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png

必须保留图像大小。我尝试过简单地使用body { cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'); }，但在FF/Chrome中不起作用（甚至没有检查其他浏览器）。

它无法正常工作的原因是什么？

- Gajus

Answer 1

问题不仅仅在于你的 CSS 代码缺少第二个参数，还与图像文件有关。

如果你只是简单地调整大小，使其变小（我尝试了32px进行测试），它就可以完美运行。

鉴于图像的外观，你可能还想选择“pointer”而不是“auto”。

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;

编辑： 我现在意识到你想保持尺寸，但这行不通。 请查看https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property获取更多信息。

- xec

---

在Gecko（火狐浏览器）中，光标大小的限制为128×128像素。更大的光标图像将被忽略。 - Gajus

Quirksmode指出限制为32x32，并且这是Windows的限制，而不是浏览器的限制。 - Spudley

name="" && ext="" && sudo apt-get install imagemagick && convert "$name"."$ext" -resize 32x "$name"-small."$ext" - Ciro Santilli OurBigBook.com

@xec的意思是Mozilla网站在那个页面上出现了404错误。 - SuperJumpBros

@SuperJumpBros 哈哈 - 似乎已被移动，现在更新了Mozilla的链接。 - xec

Answer 2

火狐浏览器需要第二个非URL参数，例如：

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), auto;

在Quirksmode网站上有一个很好的参考资料， CSS2 - 鼠标样式

- detaylor

---

我应该提到，但我也尝试过那个，它不起作用。演示可在http://anuary.com/dev/hp/pad3/上找到。 - Gajus

你正在使用哪个版本的FireFox？它对我来说运行良好——假设当你将鼠标悬停在黑色框上时应该可以看到一个巨大的手。Quirksmode文章提到，图片应该小于32x32像素，而演示中的这个似乎不是。 - detaylor

@Guy：在Firefox 5中运行良好；在Opera 11或IE8中无法工作（我得到正常的“指针”光标）。请注意，鼠标位置位于光标坐标（0,0）-即在“食指”的左侧几十个像素处；除非您的单击目标与光标的大小相当，否则这将导致用户经常误点（“那个手指指向那里，但它却在那里点击，我的鼠标坏了吗？”）。 - Piskvor left the building

Chrome 似乎也需要这个。 - dlchambers

Answer 3

可能导致这不起作用的原因是你在做这个： cursor:url(https://example.com/example.png) 你需要在语句后面添加 , auto。因此，这就是你要找的东西。 cursor:url(https://example.com/example.png),auto; 这是代码片段。

button {cursor:url("data:image/x-icon;base64,AAACAAEAICAAAAAAAACoCAAAFgAAACgAAAAgAAAAQAAAAAEACAAAAAAAAAQAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAP8IAP8RAAAA/+YABP8AAAD/iAAAav8AAP+3AACi/wALCxIAAHP/APL/AAAA6v8AALv/AACV/wDQ/wAAAP8RAAD/9wAAe/8AACb/AABV/wAAAP8A/8gAAP/3AAAA+/8AAP8aAF7/AAAA/1EA/wCzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAFQAAAA4AAAAAAAAVABgAAAAAAAAAAAAAAAAAAAAAAAAGEQAADAAJAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAABEEAAAZAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAsACQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAcCQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMAAAkAAAAJCQkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAACQAACQAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAKAAAACQkcAgsZDA4VABUAAAAAAAAAAAAAAAAAAAAAAA0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBRsBGg8WAAAEEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBEGFQAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxAXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////////////////////////////////////////////////8/////H////w////cPH//zDg//8Q5P//AOD//wDx//8A////AP///wH///8DgH//AwA//wAAH/4AAB/+AAf//AAD//wAAf/4AAD/+Af///Af///wf///8f////"),auto;}

<button>Hover over me!</button>

Is this what you looked for?

- Octavium - The HTML Helper

Answer 4

你的自定义光标在Firefox和Chrome中无法工作的原因很可能是由于浏览器的跨域策略。为了防止潜在的滥用和保护用户隐私，浏览器在使用外部资源作为自定义光标时有安全限制。

当你使用CSS属性cursor并指定一个URL时，浏览器将其视为外部资源，并且如果不符合同源策略，可能会阻止其作为光标使用。换句话说，光标图像必须托管在与网页相同的域上，才能在现代浏览器中正常工作。

在你的情况下，你提供的图像URL（http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png）似乎托管在与你的网页不同的域名（anuary.com）。因此，浏览器会阻止将该图像用作自定义光标。

要使其正常工作，你有两个选择：

1. 将图片托管在同一域名下：将hand-cursor.png图片上传到您自己的服务器，并相应地更新CSS中的URL。这样，图片将从与您的网页相同的源加载，不会违反跨域策略。

2. 对图片进行Base64编码：使用Base64编码将图片转换为数据URL，并直接在CSS中使用该数据URL。这种方法将图像数据嵌入到CSS中，使其无论来源如何都能正常工作。以下是您可以执行此操作的步骤：

   • 使用在线工具将图片转换为Base64数据URL。
   • 更新您的CSS以使用Base64数据URL：

   body {
     cursor: url('data:image/png;base64,PUT_YOUR_BASE64_ENCODED_IMAGE_HERE');
   }
   

   将PUT_YOUR_BASE64_ENCODED_IMAGE_HERE替换为实际的Base64编码图像数据。

请记住，在CSS中使用Base64编码的图像可能会增加CSS文件的大小，因此在使用此方法处理大型图像时要谨慎。另外，请注意，一些较旧版本的Internet Explorer可能不支持这种方法，但它应该在像Firefox和Chrome这样的现代主流浏览器的最新版本中正常工作。

- Samuel Getachew