使用不带href的锚只是为了得到:悬停效果?

时间:2010-07-06 13:51:10

标签: html anchor

如果你看here并将鼠标悬停在“PONUDA”上,你将获得漂亮的悬停效果。问题在于,所有的li都锚定了确实具有 href值,因此当您点击它们时,将打开一些页面。但是因为当你将鼠标悬停在“PONUDA”上时我显示了一些子菜单,我不希望它被链接但我仍然希望有悬停效果。这就是为什么代码是这样的:

<a>PONUDA</a>

我从来没有想过使用没有href值的锚,所以很少有问题:

  1. 此技术的使用效果如何:锚点的悬停状态?我知道我可以使用js,但我只想知道当你只想使用那个伪选择器时它是否可行解决方案:悬停,所以只是没有js的css。
  2. 搜索引擎怎么样?当他们到达锚标签时他们做了什么,他们发现它没有href?他们是否希望每个锚标签都有href?
  3. 我知道这是一个愚蠢的问题,但任何对这个“问题”的提及都会很棒!

5 个答案:

答案 0 :(得分:3)

<a href="#">没问题。

但您可能希望将href指向备份页面,以便那些没有Javascript的人仍然可以导航到包含子菜单选项链接的页面。然后添加一个返回false的onclick处理程序,以防止启用Javascript的浏览器(可以看到您的菜单)在链接后点击该链接。

这样,你已经覆盖了所有的基础,并且为自己证明为什么href属性存在:)

答案 1 :(得分:2)

大多数现代浏览器都支持在:hover以外的标记上使用a伪类,因此您只需将它们应用于li标记,即使使用Internet Explorer也有很多的解决方法。如果你不想使用任何Javascript,This workaround是一个非常好的。

在我看来,在:hover元素本身使用li有什么好处,即使你移动到其中一个嵌套列表元素(即子菜单元素)时,悬停状态仍然存在。但是,如果你不太想要这种效果,我建议坚持使用a标签(尽管正如Pekka所说)。

答案 2 :(得分:0)

根据我所知,你不必将元素作为锚点:hover psuedo-class适用于任何有效的DOM元素。如果您担心,可以将href="#"添加到代码中。

答案 3 :(得分:0)

  1. 对我来说看起来很有效,但除非你需要它在IE6或其他东西上工作,否则你没有理由不能只使用span

  2. The href attribute is optional on a elements
    我不明白为什么搜索引擎会期望存在任何可选属性。此外,本着自由接受你所接受的精神。即使它是强制性的,我想任何体面的搜索引擎都能应付。

答案 4 :(得分:-2)

您可以使用<a href="#">...</a><a href="javascript:;">...</a>

没有href属性是无效标记