Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS custom cursor doesn't work in FF/Chrome

Tags:

html

css

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?

like image 275
Gajus Avatar asked Jul 08 '11 11:07

Gajus


People also ask

Why is custom cursor not working?

There could be various reasons behind the custom cursor extension not working in Chrome. First, make sure that you are not on the homepage or the Chrome Web Store since the extension is not designed to work here. Also, certain Chrome settings are known to affect the functioning of the extension and lead to issues.

Is custom cursor safe for Chrome?

This software product was tested thoroughly and was found absolutely clean; therefore, it can be installed with no concern by any computer user.

What is curser pointer in CSS?

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.


2 Answers

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

like image 157
xec Avatar answered Sep 24 '22 00:09

xec


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

like image 21
detaylor Avatar answered Sep 21 '22 00:09

detaylor