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.

Camara

Do the links have a href attribute? – Mecklenburg

@Juhana no, I'm using jQuery's click – Camara

If you add a href that does nothing (for example href="#") you should see the usual pointer. – Mecklenburg

@Juhana I like to avoid the # at the end of my URL if possible, just looks unclean to me. cursor in CSS seems to work fine. – Camara

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

Underworld

Perfect, I'd use cursor: hand in this case. – Camara

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

Dyandyana