Search code examples
csshovercursor

Cursor not working in a:hover

I am having an issue with some css. I am trying to set a custom cursor for when hovering over links. I am trying to with this code but nothing happens and it stays the pointer.

a {
    color: #99ccff;
    cursor: paw.cur;
}

a:hover {
    color: #71b2f4;
    cursor: paw.cur;
}

Even adding !important to the end of the a:hover one doesn't work.

Solution

  • Using: cursor: paw.cur; is incorrect CSS syntax.

    You have to specify a URL if you want to use a custom image based cursor..

    View the specs on cursor.. documentation here (mozilla developer).

    Here is an example of a custom cursor..

    a:hover {
    cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}

    jsfiddle here - custom

    Here is an example of a default cursor..

    a:hover {
    cursor: crosshair;
}

    jsfiddle here - defualt

    I actually answered a question similar to this a while ago: Using external images for CSS custom cursors