Question

I remember reading on SO about how you are not meant to use this trick: <a href="#"> which is fine by me, as it seems to make the browser scroll to the top of the page, which is unwanted.

But I do want the cursor to change to a pointer (the gloved hand) so users know that an element is clickable. Yet, the clickable element does not link to anywhere.
I found this code on the W3C, however they say that it will not run in Opera; so my question is, how do I make the cursor change to a pointer on all browsers without reffering to the <a href="#"> trick.

The code looks something like this:

<a style="cursor:pointer;" onclick="run_function();">Click Me</a>

All I can think of is to use php or javascript to use the above code, and replace it with <a href="#" onclick="run_function();">Click Me</a> if the browser is Opera. But this does not seem desirable. Does anyone know of a simple, good practice method of achieving this effect without resorting to the above hack/kludge?

Thanks

Answer 1

The cursor: pointer; CSS property is what is used for your trick. You can add a pointer class to your element, so that you type it only once.

Example:

<div class="pointer">Stuff.</div>

And in your CSS file:

.pointer {
    cursor: pointer;
}

And it works in all major browsers. Source here : http://www.quirksmode.org/css/cursor.html