Showing links while hovering its parent using CSS

Placed in: Home

Showing links while hovering using CSS

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.

Achieving this technique isn't really hard and is more like a "small trick". That doesn't mean that it isn't useful: With this small piece of CSS, you can add a lot more rest to your website, since not so many links get loads of attention: Only when hovering the parent tag.

Demo showing links while hovering using CSS

Download showing links while hovering using CSS

Internet Explorer 6 is a real game stopper when it comes to CSS. I'm also giving a neat little jQuery solution to make this nice technique cross-browser compatible.

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!

Download and Conclusion

Yeah - I know. You could have just use jQuery to work for all browsers. I didn't want to do so, just to actually show the power of CSS. I'm also trying to open peoples eyes to just try stuff: Did you know the :hover works on a paragraph element?

This technique can be useful when you want to add links to certain paragraphs, but don't need a lot of attention from the user. Where would you try implementing something like this?

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New

RSS

Gaya	2009-04-20 20:02:35

Hey Marco. Good to see you've picked this trick up. There is a ugly work around to make it work in IE6 though:

http://www.xs4all.nl/~peterned/csshover.html

It works... but not perfect =(!

And about the links; I am not a fan of hiding content from your users. Not all users go over a paragraph while reading it. I for one like to put the cursor to the edge of the screen and scroll using the up and down keys on my keyboard.
My solution would be to make the links not so noticeable, just slightly different from the text. And then apply the hover effect.
That were my two cents.