CSS custom cursor doesn t work in FF Chrome

Question

I'm trying to make a custom cursor using an image. The image size must be retained. I tried using:

body {
  cursor: url('custom-cursor-image.png');
}
but it doesn’t work in Firefox or Chrome (haven’t tested other browsers yet).

Is there a reason why this might not be working?

Answer 1

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

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

The image size must be retained. I've tried simply to use body { cursor: url('http://anuary.com/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 2

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('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;