IE 6 and lower versions of IE only implemented :hover for tag a. As per CSS 2.1 specification, all HTML tags / elements have :hover state so that when mouse pointer hovers over, different styles can be applied to them.
li:hover is one of the frequent reasons why you need this hack. First, you have to download the .htc file.
and implement it in your CSS file like this:
body {
behavior:url("/styles/csshover3.htc");
}supposing you have put it in styles directory which is under the document root of your site.
Now you can freely select li:hover and other elements’ hover state and style ‘em!
{ 18 comments… read them below or add one }
Thanks dude that was what I searched for to bring my vertical CSS navigation to live in IE6. Hope that IE6 will be death soon lol :-(.
@freepuke – I believe it is, almost. ;)
thx
Thanks. This worked great – super easy.
@Yang Yang
Hum I don’t know… when I’am looking to my stats tool more than 20% of all visitors are using IE 6 :-( I think IE 6 will die (hopefully) after the new Windows release. God hope it is better then Vista and beats XP (with IE 6 Standard) from the market!
Cool stuff. This is definitely more elegant than using js to create .hover classes.
Thanks for the file, now ie6 work fine.
Not working for me at all – it takes no efect.. Have checked file paths, it definately is seeing the htc file.. any ideas?
@Michelle,
One of my friends was trying this out and also saw no effect, at last we were able to trouble shoot the problem as the behavior URL must be relative to the HTML file you are serving rater than the CSS. So, if you are not using an absolute path, make sure the path to the HTC file is relatively correct against the HTML file, not the CSS file where this line of code is contained.
Hope it helps. Let me know.
I’m glad I read down to the comments about this – it wasn’t working until I pointed it relative to the HTML files. I suggest including this direction in the original tutorial. And thank you so much for the solution!
thx my friend u have made it easier for us…thx alot
well. IE6 is bad but many large firms are still using it so no way to skip it… thanks for your css hack.
Thanks man, saved me a lot of trouble.
Simple & fast fix, works 100%!
Thank You! My client won’t upgrade to ie 8 so I have to deel with this #!?*
Glad it works for you guys!
Hi Yang
It’s not working for me in IE 6………..
I’m pretty sure it does work. Make sure you have given the correct path to the htc file in your CSS file.
Cool trick.
BTW – as of August, 2010, the marketshare using IE6 on my web site is 5.7% and SHRINKING. The marketshare with JavaScript DISABLED is 7.1% and GROWING.
Depending on what you are using the :hover for, you may wish to consider abandoning the IE6 support (following Google, YouTube, and several other companys’ leads). If you are only creating hover effects for buttons, don’t bother with this solution. But if your site’s usability depends on the :hover this solution may be necessary.
{ 4 trackbacks }