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

CSS ルールを使用した回答はvisibility、少なくとも 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;
}