How to implement cross-context CSS image cursors?

Question

I'm doing something wrong here, and will appreciate advice on correcting it.

Using the cursor attribute in CSS, with an image url, works but I cannot seem to get it working with anything other than the default context. For example, when I hover over an anchor, the cursor converts to the general OS pointer cursor.

I want to be able to define a different image url for each context. Is this possible?

Thanks in advance.

P.S. I'm using Chrome for testing, but cross-browser is needed as well. I also already know that Opera does not support image cursors.

score 1 · Accepted Answer · answered Oct 15 '13 at 06:41

1

You need to override the default browser cursor, by targeting the a element

Demo

div, div a:hover {
   cursor: url(http://investor.dragonwaveinc.com/common/images/briefcase-addv2.gif), auto;
}

So by using div a:hover, we will override the default pointer cursor on hover

answered Oct 15 '13 at 06:41

Mr. Alien

153,751
34
298
278

1

That makes perfect sense, and now I feel like an idiot for not thinking of it already. (I'll accept this in 10 minutes, when the timer flips). Thanks. – Spot Oct 15 '13 at 06:43
Is there any way to define a custom cursor for the 'working' state? – Spot Oct 15 '13 at 07:35
@Spot You mean you want to change the cursor when somethings loading? http://jsfiddle.net/Lg3Ac/ – Mr. Alien Oct 15 '13 at 07:38
@MrAlien No, I mean the opposite actually. When the browser is displaying the loading cursor (of it's own accord), I would like to be able to use url() definition there. – Spot Oct 17 '13 at 01:02
Also, is there any way to style cursors which interact with system windows (such as alert boxes)? Or, is this a browser limitation? – Spot Oct 17 '13 at 01:02

score 1 · Answer 2 · answered Oct 15 '13 at 06:51

That issue is because when you're hovering over the image, you're actually hovering over the hyper link at the same time. Whose cursor property is set to pointer. And it overrides all other properties set to the other.

So try to edit the class of that hyperlink too, to make sure it works just for that image and all other hyperlinks are having the default cursor.

And yeah, CSS is cross-browser so you won't find any errors.

You can check the browser's developer tools:

However, if you want future support then you can try to look in the Developers tools (F12) and check which property is being applied to which element and it will surely tell you the line too. So you can check why some CSS gets applied and why some CSS properties gets override in CSS.

How to implement cross-context CSS image cursors?

2 Answers2