CSS自定义光标不工作 [英] css custom cursor not working

问题描述

我使用css自定义光标为光标使用图像。图像不起作用。这段代码有什么问题？

这里是使用的图片。 小提琴

  cursor：url（'http://www.sarkelliancreed.comule.com/pics/TREES.jpg'），auto; 
  

解决方案

昨晚我正在处理这个问题。问题是可以用作光标的图像的大小是有限制的。如果你确实需要一个大的图片来跟踪光标，那么将该图片的div对齐到mousemove事件的光标位置。

MDN至少描述了尺寸Firefox的限制：

在Gecko（Firefox）中，光标大小限制为128×128像素。较大的光标图像将被忽略。但是，为了与操作系统和平台兼容，您应该将自己限制为32×32的大小。

：//developer.mozilla.org/en-US/docs/Web/CSS/cursor/urlrel =noreferrer> https://developer.mozilla.org/en-US/docs/Web/CSS/cursor / url>

放入这个笑脸，而不是你用作URL的图像，再次运行Fiddle，它可以工作： http://icons-search.com/img /icons-land/IconsLandVistaStyleEmoticonsDemo.zip/IconsLandVistaStyleEmoticonsDemo-ICO-Cool.ico-32x32.png

I am using the css custom cursor to use an image for the cursor. The image doesn't work. What is wrong with this code?
Here is the image used. Fiddle

 cursor: url('http://www.sarkelliancreed.comule.com/pics/TREES.jpg'), auto;

解决方案

I was dealing with this problem last night. The issue is that there is a limit to the size of the image you can use as a cursor. If you really need an image that large to follow the cursor, have a div with that image snap to the cursor position on the mousemove event.

MDN at least describes the size limit for Firefox:

In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url

Put in this smiley rather than the image you're using as the URL and run the Fiddle again, and it works: http://icons-search.com/img/icons-land/IconsLandVistaStyleEmoticonsDemo.zip/IconsLandVistaStyleEmoticonsDemo-ICO-Cool.ico-32x32.png

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