Why not hand when hovering link()?

Question

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

Why do you have the span in there in the first place? If it isn't specifying a style class or being identified by an id for javascript, it seems fairly unnecessary, and it may be causing the element to be interpreted differently by the browser. — Joel Etherton, Feb 18 '11 at 20:28
You are right, in my case I dont want to link to a page, instead I will run javascript on click. The grate thing with a element is that I easly can use active, hover for css. But you mean that I should use a span instead and then add the onmouseover, onmouseout, mousedown, mouseup attributes ? — Banshee, Feb 19 '11 at 08:23

score 12 · Accepted Answer · answered Feb 18 '11 at 20:27

12

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

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

answered Feb 18 '11 at 20:27

Šime Vidas

182,163
62
281
385

1

to add to this, you should specify a href like `#btn1` (ideally the name of the action being performed) to give you some history control on the events. – zzzzBov Feb 18 '11 at 20:30
1

@zzzz My approach would be to just set href="#" and then disable the anchors via preventDefault(). – Šime Vidas Feb 18 '11 at 20:35
Vidas, I do that too, but I really love the idea of the browser back button being easily converted into `undo` with the creative use of the `hashchange` event. – zzzzBov Feb 18 '11 at 21:27

score 6 · Answer 2 · answered Feb 18 '11 at 20:28

6

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

answered Feb 18 '11 at 20:28

spaetzel

1,252
3
16
23

score 3 · Answer 3 · answered Feb 18 '11 at 20:49

3

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

answered Feb 18 '11 at 20:49

knuton

3,537
3
24
23

You are right, in my case I dont want to link to a page, instead I will run javascript on click. The grate thing with a element is that I easly can use active, hover for css. But you mean that I should use a span instead and then add the onmouseover, onmouseout, mousedown, mouseup attributes ? – Banshee Feb 19 '11 at 08:23
No, you should probably add a `href` attribute. Is there an actual URL you want to reference? – knuton Feb 19 '11 at 12:17
No, this will not a real link, It will submit a form with javascript. is a regular a element with href=# still correct way to go? Or should I go with a span and then use onmouseover, onmouseout, mousedown, mouseup attributes? – Banshee Feb 21 '11 at 17:41
Well, if you want to submit a form, you should probably use a submit button and style it according to your needs. Is this for a website or some kind of JavaScript application (e.g. for Mac OS X's Dashboard or a mobile plattform)? – knuton Feb 23 '11 at 11:11
If it is part of a "normal" website, you should most probably use a submit button, so that users without JavaScript can perform a search as well. If not and you don't want to use a button element for some reason, I would go with an `a` element with `href="#"`. – knuton Feb 23 '11 at 11:21
Here's an example of styling a submit button in *link manner*: http://jsfiddle.net/D5QvG/ – knuton Feb 23 '11 at 11:22
Its alot of talk about supporting no javascript? Do not all "modern" sites use javascript? Yes I know that the cawlers do not handle it but there is ways of solving this. – Banshee Feb 24 '11 at 13:40
It is true that today JavaScript can be expected in most clients. When designing web pages, though, it is good practice to make sites a accessible and universally usable, as sensibly viable. When you make use of standard elements for the respective functions, users with unusual setups will have a better chance at using your website. You could consider, for example, blind or otherwise handicapped users browsing with a screen reader. If you unnecessarily route around standard elements you lose the benefit of having adequate UI in different user agents "for free". – knuton Feb 26 '11 at 16:40

score 2 · Answer 4 · answered Feb 18 '11 at 20:27

2

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

answered Feb 18 '11 at 20:27

Jim

72,985
14
101
108

Why not hand when hovering link()?

4 Answers4