CODEWITHSUNDEEP
csshovercursor
Jatasgo
Jatasgo

Reputation: 23

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.

Upvotes: 2

Views: 1864

Answers (2)

john wright
john wright

Reputation: 43

You need to use it like this:

cursor: url('paw.cur');

or

cursor: url('paw.gif');

You need to use a URL if you want to use a custom cursor.

Quoting from MDN

Formal syntax: [ [ [ ]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ] ]

<uri>
A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.

And

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

Trust me !important isn't do magic every where it just set highest priority

Useful post

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240888

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

Upvotes: 5

Related Questions