How do I change the visibility of a hyperlink when the mouse moves over it?

Question

How can I make a link visible only when one hovers over the link?

Answer 1

Try this:

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

---

Edit    After piquadrat pointed out that Firefox doesn’t hover invisible elements, try this instead:

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

And the corresponding HTML:

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

Answer 2

Did you mean you'd like the link to appear like normal text?

If so:

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

Answer 3

The answers that used visibility CSS rule don't work for me, at least not in FF. The link is not visible, so when you move the mouse over it FF thinks you are hovering over whatever is behind the link.

This works for me though (even in 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;
}