Why not hand when hovering link(<a>)?

Hi,

I know that its possible to set the cusor to hand when hovering an object like this:

CSS :

cursor:             hand;
cursor:             pointer;

This should be done automaticly with a link element that looks like this :

<a onclick="" class="btn1">
  <span>Sök</span>
</a>

But In my case its not?

With firebug I can see that the followin CSS is applyed

<a> element
a.btn1 {
    background: url("Images/Menus/bg_button_a.gif") no-repeat scroll right top transparent;
    color: #444444;
    display: block;
    float: left;
    font: 12px arial,sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px;
    text-decoration: none;
}
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial,Verdana,serif;
    font-size: 0.81em;
}

And

SPAN element
    开发者_高级运维a.btn1 span {
        background: url("Images/Menus/bg_button_span.gif") no-repeat scroll 0 0 transparent;
        display: block;
        line-height: 14px;
        padding: 5px 0 5px 18px;
    }
    Controls.css (rad 80)
    * {
        margin: 0;
    }

    a.btn1 {
        color: #444444;
        font: 12px arial,sans-serif;
        text-decoration: none;
    }

    body {
        font-family: Arial,Verdana,serif;
        font-size: 0.81em;
    }

How can I track down this problem?

BestRegards

The hand appears only if the ANCHOR has a href attribute set.

Live demo: http://jsfiddle.net/KAEbR/

It's likely because your doesn't have a "href" value, you could change it to

<a href="#" onclick="" class="btn1"/>

You can also add the following css to force the hand to always appear for links:

a{ cursor: pointer;}

Without the href attribute the a tag does not declare a hyperlink. If it possesses a name or id attribute, it may declare the destination of a hyperlink instead. (http://www.w3.org/TR/html4/struct/links.html#anchors-with-id)

If the element you want to declare has no semantic resemblance to a hyperlink and you are relying on CSS to make it appear like one, why bother? You might just as well use any old span.

What you should not do is write a { cursor:pointer; } into your CSS, causing any a elements to display a hand on hover, even those that are not hyperlinks. Instead you should add a href attribute like has been suggested. As a value you could enter # if there is no non-JavaScript functionality to fall back on. Otherwise you should enter the URI of the resource you want to link to.

See also Wikipedia: http://en.wikipedia.org/wiki/HTML_element#Anchor

That's not a link. Links have href attributes. That's just an anchor that runs JavaScript when clicked.