为啥 a:hover 不能在没有 href 属性的锚上工作？

Posted 2023-03-06

【中文标题】为啥 a:hover 不能在没有 href 属性的锚上工作？

【英文标题】：Why doesn't a:hover work on an anchor without an href attribute?为什么 a:hover 不能在没有 href 属性的锚上工作？

【发布时间】：2010-11-05 16:04:39

【问题描述】：

在我的应用程序中，当我的锚标记没有 href 属性时，我无法使用 a:hover css 样式。

这有什么原因吗？

【问题讨论】：

你能贴出你在什么浏览器上测试这个吗？

IE和firefox都有这个问题。

我在 FireFox 中没有看到这个问题。

【参考方案1】：

尝试添加 DOCTYPE。没有它，IE 往往会忽略某些指令。具体来说，锚标记上的 :hover 在 IE8 中没有 HREF 时会失败，但在包含 Xhtml Transitional DOCTYPE 时有效。

【参考方案2】：

悬停用于链接。如果没有 HREF，标签只是一个锚。

换句话说……

<a name="target"></a>

是页面中的锚点...

<a href="#target">go there</a>

将是一个链接。

由于 ANCHOR 在页面上没有可视化表示.. :hover 将毫无用处。

【讨论】：

你的意思是悬停只适用于链接？但是上面的帖子说悬停可能会以某种方式工作。您是否有任何参考链接可以证明这一点？

这里是 W3C 文档的链接。我所说的 LINK 和 ANCHOR，它们分别称为 SOURCE ANCHOR 和 DESTINATION ANCHOR。默认情况下，所有 ANCHOR 都是 DESTINATION ANCHOR（如页面内的书签）。正是 HREF 属性将 DESTINATION ANCHOR 变成了 SOURCE ANCHOR (LINK)。由于 DESTINATION ANCHOR 不是可点击的链接，因此添加 :hover 是没有意义的。

所以你看...有一些变通方法...比如 href="#" （它指向页面本身，因为在 # 后面没有指定 DESTINATION ANCHOR 名称）或 href= “javascript：无效（0）；”我不建议这样做，因为它违反了我试图遵循的不引人注目的 JavaScript 口头禅。

【参考方案3】：

:hover 选择器的 W3C CSS 2.0 specification 没有提及任何关于需要 href 属性的内容。

我怀疑这是特定于实现的东西，很可能 IE 很傻。如果我没记错的话，微软在 :hover 选择器成为 CSS 标准的一部分之前就发明了它，它最初只适用于锚点。所以是的，这可能是 IE(6) 的一个怪癖。

IE6（所有 IE？）的 hacky 修复可能是使用 href="#"，它只指向当前页面（因此什么都不做）。

【讨论】：

是的，添加 href="anything" 绝对会让它变得正常。感觉很奇怪。

【参考方案4】：

您使用的是哪种浏览器？这可能是个怪癖——我认为当然不需要href，即使用旧的<a name> 方法在文档中创建链接时。

【讨论】：

@Peter，IE 和 firefox 都有这个问题。

【参考方案5】：

IE 不支持 a:hover 在没有 href 的标签中。您可以使用 href="#" 或 href="Javascript:void(0);"但是最后一个选项可能也不适用于 IE6。

或者使用 Javascript mouseover/mouseout。

【讨论】：

但是IE和firefox都有这个问题，怎么办？

href="#" 最好使用 javascript 取消（并返回 false）。

试试 href="#" 看看会发生什么。它可能是其他东西，例如继承的样式或覆盖行为的 js。

+1 表示 href='Javascript:void(0);'。工作完美！我的锚点用于调用一个 javascript 函数，该函数切换 标记的可见性，并且使用 href='#' 导致页面 not 保持其滚动位置，因此 href='Javascript:无效（0）；'对我来说是一个更好的解决方案。

【参考方案6】：

可能不是答案，但 a:hover 必须出现在 a:link 和 a:visited 之后才有效。

见W3Schools