CSS自定义光标在FF/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中不起作用.(甚至不检查其他浏览器)

它不起作用的原因是什么？

Answer 1

问题不仅在于你的css代码缺少第二个参数而且还有图像文件.

如果你只是调整大小,让它变小(我尝试32px用于测试目的)它就像一个魅力.

你可能也想要"指针"而不是自动,从图像的外观来看;

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

编辑:我意识到你现在想要保持大小,但它不会工作.有关详细信息,请参阅https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property

"在Gecko(Firefox)中,光标大小的限制是128×128px.忽略较大的光标图像." (https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property) (8认同)
`name="" && ext="" && sudo apt-get install imagemagick && convert "$name"."$ext" -resize 32x "$name"-small."$ext"` (3认同)
Quirksmode声明限制为32x32,这是Windows限制,而不是浏览器限制. (2认同)

Answer 2

Firefox需要第二个非url参数,例如

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

Quirksmode CSS2 - Cursor Styles有一个很好的参考

Chrome似乎也需要这个 (5认同)
您使用的是哪个版本的 FireFox？它对我来说很好用 - 假设当你将鼠标悬停在黑框上时你应该看到一只巨大的手。Quirksmode 文章提到图像应该小于 32x32px，演示中的图像似乎不是。 (2认同)