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