CSS custom cursor doesn't work in FF/Chrome

Question

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 1

The problem is not just with your css code lacking second argument but with the image file.

If you simply resize, make it smaller (i tried 32px for testing purposes) it works like a charm.

You might also want "pointer" rather than auto, judging by the look of the image;

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

EDIT: i realize now you wanted to keep the size but it just won't work. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property for more info

Answer 2

Firefox requires a second non-url argument such as

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

There is a great reference at Quirksmode CSS2 - Cursor Styles