Prevent highlighter cursor in CSS?

Question

I'm using <a> to make text that can be clicked and used for jQuery. I've already got CSS to make it un-highlightable:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;

But it still changes to the cursor shaped like a serifed "I" when it's hovered, like text usually does. Is there any way to prevent this, and preferably change it to the "hand" cursor that links normally cause? The only thing I thought of was having an invisible div on top, but that would make them unclickable, and it would keep the normal pointer.

Answer 1

Simply use the cursor property on hover.

a:hover {
    cursor: pointer;
}

You can see the available cursor values here.

Example http://jsfiddle.net/8nyEE/

<a class="hand">link with hand cursor</a>

<br/><br/>

<a class="nohand">link with default cursor</a>

a {color: blue;}

.hand:hover {
   cursor: pointer;
}

.nohand:hover {
   cursor: default;
}