为什么在悬停链接(<a>)时不会显示手形图标？

Question

你好，

我知道当鼠标悬停在某个对象上时，可以将光标设置为手形，例如：

CSS :

cursor:             hand;
cursor:             pointer;

这应该通过一个链接元素自动完成，它看起来像这样：

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

但在我的情况下不是这样吗？

通过Firebug，我可以看到以下CSS被应用：

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

并且

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

我该如何追踪这个问题？

最好的问候

- Banshee

---

你为什么一开始就在那里加了这个span标签？如果它没有指定样式类或被JavaScript标识，似乎相当不必要，而且它可能会导致浏览器以不同的方式解释该元素。 - Joel Etherton

你说得对，在我的情况下，我不想链接到一个页面，而是要在点击时运行JavaScript。使用元素的好处是我可以轻松地使用active、hover等CSS属性。但是你的意思是我应该使用span，然后添加onmouseover、onmouseout、mousedown、mouseup属性吗？ - Banshee

Answer 1

只有在锚点有设置 href 属性时，手型光标才会出现。

在线演示: http://jsfiddle.net/KAEbR/

- Šime Vidas

---

此外，您应该指定一个类似于#btn1的href（最好是正在执行的操作的名称），以便在事件上具有一些历史控制。 - zzzzBov

我的做法是设置href="#"，然后通过preventDefault()禁用锚点。 - Šime Vidas

Vidas，我也这样做，但我真的很喜欢使用hashchange事件的创造性方式，将浏览器的后退按钮轻松转换为“撤销”。 - zzzzBov

Answer 2

很可能是因为您的标签没有“href”属性值，您可以将其更改为

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

您可以添加以下CSS代码，强制手形光标始终出现在链接上：

a{ cursor: pointer;}

- spaetzel

Answer 3

没有 href 属性，a 标签不会声明超链接。如果它拥有 name 或 id 属性，它可以声明超链接的目标位置。(http://www.w3.org/TR/html4/struct/links.html#anchors-with-id) 如果你想声明的元素与超链接没有语义上的相似之处，并且你依赖CSS使其看起来像一个超链接，这样做有什么意义呢？你可以随便使用任何一个老旧的 span 元素代替。你 不应该 在CSS中写入 a { cursor:pointer; }，导致任何 a 元素在悬停时都显示手形光标，即使它们不是超链接。相反，你应该添加一个像建议的那样的 href 属性。作为值，如果没有非JavaScript功能可供回退，你可以输入 #。否则，你应该输入你想要链接的资源的URI。另请参见维基百科: http://en.wikipedia.org/wiki/HTML_element#Anchor

- knuton

---

你说得对，在我的情况下，我不想链接到一个页面，而是要在点击时运行JavaScript。使用元素的好处是我可以轻松地使用active、hover等CSS属性。但是你的意思是我应该使用span，然后添加onmouseover、onmouseout、mousedown、mouseup属性吗？ - Banshee

不，你可能应该添加一个 href 属性。你想引用一个实际的 URL 吗？ - knuton

不，这不会是一个真正的链接，它将使用JavaScript提交表单。使用href=#的常规a元素仍然是正确的方法吗？还是应该使用span，然后使用onmouseover、onmouseout、mousedown、mouseup属性？ - Banshee

如果它是一个“普通”的网站的一部分，你应该最好使用一个提交按钮，这样没有 JavaScript 的用户也可以执行搜索。如果不是这样，并且由于某种原因你不想使用按钮元素，我会选择一个带有 href="#" 的 a 元素。 - knuton

这是一个样式化提交按钮的链接方式的示例：http://jsfiddle.net/D5QvG/ - knuton

Answer 4

这不是一个链接。链接有 href 属性。这只是一个在被点击时运行 JavaScript 的锚点。

- Jim