使用不带 href 的锚点只是为了获得 :hover 效果？
如果您查看此处并将鼠标悬停在“PONUDA”上，您将获得漂亮的悬停效果影响。问题是，所有 li 中都有锚点，确实有 href 值，因此当您单击它们时，将会打开一些页面。但是因为当您将鼠标悬停在“PONUDA”上时我会显示一些子菜单，所以我不希望它被链接，但我仍然希望有那种悬停效果。这就是为什么代码是这样的：
<a>PONUDA</a>
老实说，我从来没有想过使用没有 href 值的锚点，所以几个问题：
- 这种使用锚点的 :hover 状态的技术有多有效？我知道我可以使用 js，但我只是想知道当你只想使用伪选择器 :hover 时是否可以解决这个问题，所以只需使用 css 而无需使用 js。
- 那么搜索引擎呢？当他们到达锚标记并且发现它没有 href 时，他们会做什么？他们期望每个锚标记都有 href 吗？
我知道这是一个愚蠢的问题，但是任何提及这个“问题”的内容都会很棒！
If you look here and hover over "PONUDA", you will get that nice hover effect. The thing is that all li's have anchor in it that do have href value, so when you click on them some page will be opened. But because i have some sub menu shown when you hover over "PONUDA", i dont want it to be linked but i still want to have that hover effect. So thats why the code is like this:
<a>PONUDA</a>
Tbh i have never thought about using anchor without href value, so few questions:
- How valid is this technique for using :hover state of the anchor? I know i could use js, but i just want to know is it ok solution for when you just want to use that pseudo selector :hover, so just css without js.
- What about search engines? What do they do when they reach anchor tag, and they see that it does not have href? Do they expect every anchor tag to have href?
I know it a silly question, but any reference to this "problem" would be great!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
就可以了。但您可能希望将 href 指向备份页面，以便那些没有 Javascript 的人仍然可以导航到包含子菜单选项链接的页面。然后添加一个返回 false 的 onclick 处理程序，以防止启用 Javascript 的浏览器（可以看到您的菜单）在单击该链接时跟踪该链接。
这样，您就已经涵盖了所有基础知识，并且向自己证明了 href 属性存在的原因:)
<a href="#">would be fine.But you might want to point the href to a back-up page instead, so that those without Javascript could still navigate to a page containing links to the sub-menu options. Then add an onclick handler that returns false, to prevent Javascript-enabled browsers (who can see your menu) from following the link if clicked.
That way, you've covered all your bases, as well as justifying to yourself why that href attribute is there :)
大多数现代浏览器支持在
a之外的标签上使用:hover伪类，因此您可以将它们应用到li标签，并且即使使用 Internet Explorer，也有很多解决方法。 如果您不想使用任何 Javascript，此解决方法是一个很好的解决方法。在我看来，在
li元素本身上使用:hover的好处是，即使您移动到嵌套列表元素之一（即子菜单），悬停状态仍然保留。元素）。不过，如果您不太想要这种效果，我建议坚持使用a标签（尽管按照 Pekka 的说法进行）。Most modern browsers support using the
:hoverpseudo-class on tags other thana, so you could just apply them to yourlitags, and even with Internet Explorer there are plenty of workarounds. This workaround is quite a nice one if you don't want to use any Javascript.What's nice about using
:hoveron thelielements themselves, in my opinion, is that the hovered state remains even when you move to one of the nested list elements (i.e. submenu elements). If you don't quite want that effect, though, I'd suggest sticking with theatags (though doing as Pekka says).对我来说看起来有效，但除非你需要它在 IE6 或其他版本中工作，否则你没有理由不能只使用
span。href 属性在
a< 上是可选的/code> 元素。我不明白为什么搜索引擎会期望存在任何可选属性，而且，本着对您接受的内容持自由态度的精神。即使这是强制性的，我想任何像样的搜索引擎都能够应对。
Looks valid to me, but unless you need it to work in IE6 or something, earlier, there's no reason you couldn't just use
span.The href attribute is optional on
aelements.I don't see why search engines would expect any optional attribute to exist, Also, in the spirit of being liberal with what you accept. Even if it were compulsory, I'd imagine any decent search engine would be able to cope.
据我所知，您不必让该元素成为锚点，因为 :hover psuedo-class 适用于任何有效的 DOM 元素。如果您担心，可以将
href="#"添加到标记中。You don't have to have the element be an anchor, as far as I know the :hover psuedo-class works on any valid DOM element. If you are concerned, you can add
href="#"to the tag.您可以使用
...或...是无效标记
you can use
<a href="#">...</a>or<a href="javascript:;">...</a>without href attribute is an invalid markup