2

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.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Jatasgo
  • 23
  • 3

2 Answers2

5

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

Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
1

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

Community
  • 1
  • 1
john wright
  • 43
  • 5