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.

Answer 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

Answer 2

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.