Fix CSS Pseudo Hover Class

Depending on how long you have been playing around with CSS you may or may not be familiar with the CSS pseudo:hover class. The pseudo: hover class is most commonly used to display content to a user based on user interaction with elements on a web site. A user would hover over a link and a drop down with more links would appear. This was done by declaring your css element rule and adding the pseudo:hover class to the elements rule for an alternative action to be preformed when that element was hovered over.

#div a {normal state}
#div a:hover {alternative state}

I strongly encouraged you to use the pseudo:hover class simply because it give us the developers a true and more effectively way of separating our documents styles an behaviors from structure and content by means of CSS alone.

The whole point of the pseudo:hover class was to make the hover behavior accessible to any site element. The Unfortunate thing is IE5 and IE6 never picked up on the whole pseudo part of this class and only allows the pseudo:hover class to be used in anchor tags . This really restricts us developers living in an era that has a good portion of web surfers still using IE5 and IE6, because we the developers are always having to write extra code and come up with unneeded solutions that make our correctly written code work on these two faulty browsers.

At the time this tutorial is written (Nov 12, 2008) www.w3cschool.com states that 20.2% of all internet users are browsing with IE6 and below. If your site navigation depended on the use the pseudo:hover class then you might be losing lots of visitors simply because they can’t use your navigation while browsing with IE5 or IE6.

Until we as a web community abandon these versions of IE then we as developers must always find a way to support them while trying to comply within reason to our W3C standards.

So how do we fix this issue using only pure css and W3C standards? Well to be completely honest, you don’t because this is not a completely pure css hover fix for IE5 and IE6. This fix uses JavaScript to write unavailable behaviors to our lackey browser versions to once and for all support the css pseudo:hover class for all elements. What makes this approach so unique is that fact that you don’t have JavaScript being referenced in any elements through the elements them self by means of “onclick” or “mouseover”, the JavaScript resides in a .htc and the file that gets linked to our document via CSS, so no JavaScript is in your nice clean code. It’s also unique because it’s as close to a true solution while also falling within reason of our W3C compliant standard.

The down side of this method is that currently there are about 9% of all web users who don’t have JavaScript turned on in there browser. However if you think about how many out of that 9% who are using browser that do support the CSS :hover method then that number becomes even small and almost insignificant.
Here is an example of how CSS pseudo hover methods won’t work with <li> elements is IE5.5 and IE6.

Pure CSS Horizontal Navigation Menu
(Note: See IETester desktop application to test across all IE versions. “IETester Home Page)

Ok with all that out-of-the-way let’s get down to how we fix the issue and make these two browsers work well with the pseudo:hover class. First I have to give credit where credit is due to Peter Nederlof, Arnoud Berendsen, Martin Reurings and Robert Hanson who developed this .htc JavaScript file that brings the CSS2 pseudo:hover class behavior to our two faulty browsers.

You can download this JavaScript .htc file by clicking here and put it into our css folder on our web server.

Once you have the .htc file we are going to want to reference to it in our document but we will call to it within our headers css style tags, not with the normal script tags used for JavaScript. Here is what the call to our .htc file would look like.

body{behavior:;}

Ok what we are doing here is telling our documents body tag that we would like to set up a style for our behaviors or lack there of simply by declaring a rule for the body and a behavior style. Next we need to point our behavior style to our .htc file so our hover behaviors become supported at last with our CSS2 methods.

Make your CSS body rule now look like the following.

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

Hit save and believe it or not you’re done! Hover states behave as they should with all browser and we can still write pure CSS and comply with W3C all day leaving our proper and correct menu methods working as they should for all visitors.

Click below to see the same demo as above but now with the support of our .htc file and pseudo:hover behaviors working perfectly for IE5 and IE6 browsers.

Devin R. Olsen

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:TwitterFacebookGoogle Plus

81 Responses to “Fix CSS Pseudo Hover Class”

  1. Devin R. Olsen Rob says:

    Hi Devin,

    Before I ask some questions, thanks for the vertical menu tutorial – it was exactly what I was looking for to update websites I wrote many years ago in Netscape Composer (which gives an indication of my skill level). I’ve followed and adapted your guide to produces exactly what I was hoping to achieve, and learned lots in the process.

    I’m sure your IE6 “fix” tutorial is easy to understand for those with greater skill than I have, but I would appreciate some more details so I can implement it as there are a couple of details I’m not sure about. I couldn’t find the link to the demo you mentioned at the end of the tutorial.

    1] I have downloaded the the .htc file. When you say “put it into our css folder on our web server” does this mean it resides in the same folder as the css and html files, or do I need to ask the web administrator to put it somewhere?

    2] You indicate the call to the file is “body{behavior:;}” – where exactly does this belong? – in the ,html file , in here…

    or does it go into the .css file?

    3] Next, you instruct to make the CSS body rule now look like the following…
    body{behavior:url(cssHoverFix.htc);}
    Again, where specifically does this go – in the html or the css file?

    Thanks once more for generously sharing your expertise to help non-professionals like myself.

Leave a Reply