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.

Mr. Alien · Accepted Answer · 2013-10-15 06:41:13Z

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, 2013 at 6:41

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Spot Over a year ago

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 Over a year ago

Is there any way to define a custom cursor for the 'working' state?

Mr. Alien Over a year ago

@Spot You mean you want to change the cursor when somethings loading? jsfiddle.net/Lg3Ac

Spot Over a year ago

@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 Over a year ago

Also, is there any way to style cursors which interact with system windows (such as alert boxes)? Or, is this a browser limitation?

Afzaal Ahmad Zeeshan · Accepted Answer · 2013-10-15 06:51:05Z

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.

Collectives™ on Stack Overflow

How to implement cross-context CSS image cursors?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related