Links (or anchor tags) are really important in webdesign/development. With all default settings (Both in CSS and the webbrowser), a link does look pretty ugly: A blue, underlined text (and purple when you visited that website). I'm sure you've seen these colours before.

Luckily, CSS helps a lot. By changing the color, :hover and :visited you can easily make your links a little bit more fancy. Janko has written an excellent post how you can improve your links even more.

Here's a simple little CSS technique that could be really useful in your next webdesign/webdevelopment process when adding links to a HTML page. Too many links on a page can be really confusing. Some links are just more important than others: They're the one that really need the desired attention. Other links (that are more common, like links to your Twitter page or RSS feed) should not be so "special".

That's exactly what we're going to do today: Hide those unimportant links and unhide (show) them while hovering its parent. We'll achieve this using CSS.

HTML

The HTML is fairly easy (the trick is in the CSS). The example below shows two paragraphs: One normal, and one that'll hide the links. Both paragraphs have two links: One to my Twitter account and one to the RSS feed.

 
<h2>Normal paragraph</h2>
<p>Lorem ipsum dolor sit amet, consectetur <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">adipiscing elit</a>. Aenean dapibus ante id sem. Aenean eros. In vulputate semper augue. Vivamus nec ante a est pharetra lacinia. Cras euismod urna at massa. Fusce ac ipsum in mi volutpat lobortis. Etiam faucibus est vel nibh. Nullam orci tortor, hendrerit et, hendrerit sed, convallis sit amet, velit. <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">Integer augue</a> metus, [...]</p>
<h2>Colorized links on hover paragraph</h2>
<p class="colorhover">Aenean non sem vel velit posuere laoreet. <a href="http://twitter.com/marcofolio" title="Follow me on Twitter">In hac habitasse</a> platea dictumst. Suspendisse posuere volutpat leo. <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">Donec dictum</a>, ligula sed ultricies ultrices, lectus augue tempor orci, quis rhoncus lorem turpis ut velit. Nulla facilisi. Sed orci ligula, tempor non, tristique at, tempus id, orci. [...] </p>

As you could have expect, the second paragraph where the colorhover-class is applied, hides the links untill the user is hovering the paragraph. How? With CSS!

CSS

First, some CSS to help you understand this trick.

p { color:#888888; }
a { color:#718374; }
a:hover { color:#EEEEEE; }

• p - A normal paragraph has a #888888 color (grey-ish)
• a - A normal link has a #718374 color (green-ish)
• a:hover - When hovering a normal link, it has a #EEEEEE color (white-ish)

Now for the special CSS. Remember the colorhover-class from the HTML. I also added some comments to make the CSS a little bit more clear.

/* hiding the links by giving it the same colour as the text */
.colorhover a { text-decoration:none; color:#888888; }
.colorhover:hover a { color:#718374; text-decoration:underline; }
.colorhover:hover a:hover { color:#EEEEEE; }

As you can see here, the real "trick" to this, is by applying :hover to a paragraph element: It isn't limited to an <a>!

You can access all child elements (inner anchors) even with the :hover. This way, the anchors will get their color when the user is hovering it's parent. There's just one catch here.

Internet Explorer 6

As you could have expect: This CSS trick doesn't do the trick for Internet Explorer 6. Why? Because IE6 does limit the :hover functionality only to anchor tags. But with a little bit of jQuery help, we can even make this work for that old webbrowser.

Here's the JavaScript to achive the same kind of effect.

 
// CSS for anchors while hovering the parent
var csshover = { 'color' : '#718374', 'text-decoration' : 'underline' };
// CSS for anchors while not hovering the parent
var cssclear = { 'text-decoration' : 'none', 'color' : '#888888' }
$(".colorhover").hover(
   function() {
       // apply css to all anchors inside parent while hovering
      $(this).find("a").css(csshover);
   },
   function() {
       // apply css to all anchors inside parent while not hovering
      $(this).find("a").css(cssclear);
   }
);

As you can see, the jQuery/Events/hover is used. When hovering the paragraph, some CSS is applied to all anchors found inside the parent. This does work in IE6, so you'll get the same effect cross-browser!