IE6 in-link hover toggling trick

What’s the problem again?

IE6 only supports :hover on links (a elements), which means that toggling visibility of contents based on hovering (most often for custom tooltips or submenus) has to either leverage that or go the JavaScript way (which, unfortunately, is a bit less accessible).

When the contents to toggle is advanced, we generally don't use this, since a is originally an inline element and its descendant elements can therefore not be block elements such as ul, div or p, making decent (if not necessary purely semantic) markup impossible. So we generally restrict this to simple contents such as advanced tooltips.

Alas! It appears that trying to toggle a link subelement’s display property (usually from none to block) on :hover b0rks on IE6. What's a web developer to do?

More or less valid explanations for this behavior

“IE6 doesn't like having a suddenly block-level element inside a link, which is an inline-level element.”

This is actually irrelevant to IE6, but relevant to other browsers (e.g. Safari) so they decide whether to show the subcontent or not, or what kind of layout to render it with (other CSS positioning issues are involved).

Check the following for proof.

#demo1 #a1 { display: block; }
#demo1 a .content { display: none; }
#demo1 a:hover .content { display: block; }

“IE6 needs some alteration of the hovered link to consider re-rendering its descendant elements”

This actually appears to be true. The containing link itself should have some CSS change specified for it (e.g. a background color change) to render the result. The change need not even be a real change (except on display, apparently). Setting background-color: transparent when it's otherwise undefined seems to do the trick. However, going the display: block road can result in rendering artefacts at this point, as illustrated by the next example (try hovering on several links).

#demo2 a { display: block; }
#demo2 a .content { display: none; }
#demo2 a:hover { background-color: transparent; }
#demo2 a:hover .content { display: block; }

The solution: go visibility instead

The trick here is to set it all to block anyway, then toggle the visibility. Apparently, IE6 won't burp rendering artifacts when not reflowing (which makes sense, I guess), and since visibility doesn't reflow but just shows/hides while keeping the layout space, this helps. The following code has been tested on IE6+ (which obviously includes 8, since there are more IE8 than IE6 now…), Firefox 2+, Safari 4 and Opera 9.2+ (no Saf3 or Chrome handy…). Try it on for size:

#demo3 a { display: block; }
#demo3 a .content { display: block; visibility: hidden; }
#demo3 a:hover { background-color: transparent; }
#demo3 a:hover .content { visibility: visible; }

Conclusion

It is possible to toggle visibility of in-link markup using only CSS in all modern browsers and IE6—7, without CSS hacks or conditional comments. Ain't life good?

This page © 2009 Christophe Porteneuve. All code snippets licensed under WTFPL, so in short: do whatever you want with them!