CSS pseudo:hover Class Fix

To all the people people who keep playing around with CSS, you might be or might not be familiar with the “pseudo:hover” class.

What it does?
Pseudo:hover class is commonly used to display content to a user, based on interaction of the user with elements on a website or webpage. More like, the user hovers a link, where then a drop down (menu) or set of other links or content is displayed for the user. So now you got the clear cut idea of whats “:hover” class is more likely used for.

#div .parent, a, img {regular state}
#div .parent:hover, a:hover, img:hover {alternative state}

It works fine in all the browsers, Chrome, Safari, Mozilla Firefox, and also in IE 9, 8, 7. The problem arises when we come to our dead browser IE 6, and you know what www.w3cschool.com states that 3.2% of all internet users are still browsing with IE6 and below. Now when it comes to developers and clients who persist on this, no matter how many new generation browsers we have, the client just wants a fix. And to your good news, there is a fix for this issue.

The fix:
Here is the file that you can download into your CSS file directory.

Once you downloaded it, you have to just refer it in your CSS file, with just the normal script tags.

body{behavior:;}

We are just asking our documents body tag, to setup a new style for the behavior, and we just need to refer it to the .htc file.

body{behavior:url(cssHoverFix.htc);}

Just save it, and your done. Just refresh the site, and you will have it just working normal without any hassle, even in IE5.
And to the best part, it also will comply with the W3C standards.

Source:
Devin R. Olsen

Leave a Reply