I’ve been extremely busy lately, but I ran across this gem in my earlier posts. I think that it deserves it’s own spotlight, so I’ve decided post it here. As we all know, IE6 has broken support for the CSS :hover pseudo class on any element but the a tag, which is highly needed for drop down navigation. And since IE6 will need to be supported by web design and development for years to come, we still have to face this issue. Many solutions will use a separate JavaScript file to add back the missing functionality, usually a .htc behaviors file. However, I will do no such thing. I just want this to be in my CSS. Let’s setup a scenario.
Suppose you have a nav structure, styled like this
div#nav ul li
/*rules go here...*/
}
Typically, you would also incorporate some sort of hover style, like so:
div#nav ul li:hover
/* hover rules go here...*/
}
As we know, this won’t work in IE6, so we need a solution.
Here’s what I use
* html div#nav ul li{
unicode-bidi: expression(
this.onmouseover = function(){this.className += ' hover';},
this.onmouseout = function(){this.className = this.className.replace('hover','');}
);
}
Basically, this will add a class name of “hover” to the currently hovered list item. Then, when the hover is happening on a different element, it will remove the hover class from that element and put it on the new hovered element. Please note, this is not a new idea. This is simply the small line of code I use that I thought others may like. Also, take note of the * html preceding the div#nav rules. This is a hack to apply this rule to only IE6, no need to apply to others.
So, to conclude, now your CSS would look like this
div#nav ul li:hover,
div#nav ul li.hover
/* hover rules go here...*/
}
Basically, remember that anytime you would use an li:hover pseudo state to make a change, also append a li.hover rule to target the IE6 version of the hovered link!
Well, thats it. I’m busy and gotta keep it short. Peace out.
42 Comments »