html - 当鼠标移到超链接上时，如何更改超链接的可见性？

Question

如何使链接仅在将鼠标悬停在链接上时可见？

Answer 1

尝试这个：

a:link, a:visited {
    visibility: hidden;
}
a:link:hover, a:visited:hover {
    visibility: visible;
}

---

编辑    在 piquadrat 指出 Firefox 不会悬停不可见元素后，请尝试以下操作：

a:link span, a:visited span {
    visibility: hidden;
}
a:link:hover span, a:visited:hover span {
    visibility: visible;
}

以及相应的 HTML：

Lorem <a href="foo"><span>foo</span></a> ipsum dolor sit amet …

Answer 2

您的意思是您希望链接显示为普通文本吗？

如果是这样：

a { text-decoration: none; color: inherit; }
a:hover, a:active { text-decoration: underline; color: #00F; }

Answer 3

使用visibilityCSS 规则的答案对我不起作用，至少在 FF 中不起作用。该链接不可见，因此当您将鼠标移到它上面时，FF 认为您正在将鼠标悬停在链接后面的任何内容上。

这对我有用（即使在 IE6 中！）：

a {
  zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;
}
a:hover {
  zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;
}