CSS custom cursor doesn t work in FF Chrome

Question

I am trying to create a custom cursor using the following image:

/dev/hp/pad3/public/images/hand-cursor.png

The image size must be retained. I've tried simply to use body { cursor: url('/dev/hp/pad3/public/images/hand-cursor.png'); }, though that doesn't work in FF/Chrome. (not even checking other browsers)

What's the reason for it not working?

Answer 1

The issue is not with your CSS code's lack of a second argument, but with the picture file itself.

It works perfectly if you simply reduce it to a smaller size (I tested 32px for testing purposes).

According to the appearance of the image, you might also desire "pointer" rather than "auto."

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