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;
}

Answer 2

Set the <a> tag to <a href="">

As JJJ said in a comment above the href="#" would work here, but add the # to the url. Instead setting href to "" would be an alternative to send the link no where and removing the I cursor reaction

edit: This reloads the page and can cause errors. Apologies for not reading further into the issue. Setting cursor: hand; on all of the children of the <a> tag containing the text should do the trick