Pseudo-class Descendant Selectors in IE 6

How to use pseudo-class descendant selectors in IE 6

This is a rollover This is the hidden content

If you mouse over the "This is a rollover" text above, "This is the hidden content" should appear (even in IE 6!), even though it's a CSS-only solution. In the past, I thought this wasn't possible, because IE 6 doesn't support pseudo-class descendant selectors and I would use JavaScript as a workaround. However, I was wrong. Thanks to Trent Richardson, I learned there is a way to make IE 6 recognize pseudo-class descendant selectors.

The HTML:

<p><a href="/" class="rollover">This is a rollover <span class="tooltip">This is the hidden content.</span></a></p>

The CSS:

a.rollover span {
display: none;
}
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.rollover:hover {
background:;
}
a.rollover:hover span.tooltip {
display: block;

Last update—11 June 2008

Want to work with us yet? We’re ready when you are.