<A> attribute gives Edit cursor on hover

Question

I am defining three menu buttons

<div id="buttonscontainer">
    <ul>
    <li><a unselectable="on" value="insert" onClick="insertText('[BEFORE]', '[AFTER]'); return false;">Bold</a></li>
    <li><a unselectable="on" value="insert" onClick="insertText('[BEFORE]', '[AFTER]'); return false;">Italic</a></li>
    <li><a unselectable="on" value="insert" onClick="insertText('[BEFORE]', '[AFTER]'); return false;">Image</a></li>
    </ul>
    </div>

I use <a> tag to create simple text button with OnClick jscript.

The problem is that when user hovers over the link the cursors is changed to edit (like editbox cursor)

Why is that behaviuor? Or do I have to look in CSS for particular attribute

Answer 1

You either need to add the href attribute to your anchor or in CSS you can add:

#buttonscontainer a:hover
{
    cursor: pointer;
}

Either of those will change the cursor to the pointer :)

jsFiddle example.