css自定义光标不起作用

Question

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;

Answer 1

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.

MDN documentation for cursor property in CSS

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

Answer 2

Any type of file format won't work, only .cur files.

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

source: https://fb.watch/dRdLF-vwD2/