cssbrowsercross-browsercustom-cursor

How to implement cross-context CSS image cursors?

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.

Solution

  • 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