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 Lynne says:

    Hi Devin, I think I have the flyout working but wouldn’t mind if you took a look at what I have to see if it makes sense.

  2. Devin R. Olsen Devin R. Olsen says:

    Lynne – Yes, should still be the same concept, if for what ever reason you just cant get it to work shoot me your email here on the contact page. I will send you mine back and I will take a look at it together.

  3. Devin R. Olsen Lynne says:

    Ah, now I see what you mean. I will give it a try. I am actually doing a flyout but think the concept is probably the same. Thanks Devin.

  4. Devin R. Olsen Devin R. Olsen says:

    Hi Lynne – The .htc file will allow you to hover over and display nested elements not matter how deep the nesting maybe. However with that said, I would never suggest you really try to go beyond a two level sub menu while using \”ul and li\” references only. Beyond this second sub level using \”ul and li\” reference only, browsers will become confused and perform incorrectly.

    Solution, ditch the \”ul li\” reference to each sub nested level, and give each level a unique ID and begin to declare your hover conditions from there.
    A) It will work.

    B) You will thank me for saving you hours of headache.

    Of course, what kind of site would this be if I didn’t provide you with some study materials.

    Click here to view working example.

  5. Devin R. Olsen Lynne says:

    Hi Devin, Great solution – thanks so much. I am having a problem applying this with a 2 or 3 level submenu. Any thoughts on how I might be able to do this? Perhaps it only works for a one level dropdown or flyout?

  6. Devin R. Olsen Devin R. Olsen says:

    Hi Ross, great question, yes indeed this still leaves your site SEO friendly, more so than any other solution in fact. The last part, I was a bit confused about, you don’t declare the use of pseudo hover by actually adding \”pseudo\” into the CSS rule name. Rather simply apply :hover to any rule you want a alternative hover state too like this. #navigation li:hover {color:#fff; text-decoration:underline;}. Let me know if this helps you or if you have any other questions, people need to ask more questions in here as it is ;)

  7. Devin R. Olsen Ross says:

    Nice work dude. I’ve been looking for a tutorial like this for ages, not even a youtube video on this, which you think there would be.

    Quick Question – Is this method still SEO friendly? Is it better then linking to a js?

    Just to let people know because at first I didn’t understand you need to do all of the above and change css like below, all though for some reason it removes the underline?!?

    #navigation li pseudo:hover
    {color:#fff; text-decoration:underline;}

  8. Devin R. Olsen Lynne says:

    Hi Devin, Haven’t received the email yet. Email is lynne@nano2pico.com. I was wondering if this has something to do with the z-index or position relative?

  9. Devin R. Olsen Curt says:

    Thank You!

  10. Devin R. Olsen Devin R. Olsen says:

    Hi Jean Valjean, I am sure it is possible if you are familiar with writing event handlers and .htc file parsing. I however have yet to dig into building them. I would like to start learning though to bring not only pseudo classed down to the lackey browsers but also CSS2 selectors. I feel however with the lack of do…entation out there on .htc files it might be a while. My outlook on all things though is that if there’s a will, there’s a way!

  11. Devin R. Olsen Jean Valjean says:

    Is it possible to fix the :active pseudo class in the same way?

  12. Devin R. Olsen Skry says:

    Top job – a quick and easy fix for IE5

  13. Devin R. Olsen JW says:

    I can’t thank you enough. I have worked on this issue for months. Each time i ended up feeling like I failed. This was by far the easiest solution i have ever come across. Thanks!

  14. Devin R. Olsen Metal_Man says:

    Thanks for the quick reply… I will be looking back to your site periodically. Thanks again

  15. Devin R. Olsen Devin R. Olsen says:

    Hi Metal_Man, glad you found a solution to your problem. I have never needed to use the .htc hover fix file for IE7 as IE7 is CSS2 compatible so the pseudo hover fix is native with this browser version. IE6 and IE5 however is another story and this is where the .htc file comes into play. Glad you liked the tutorial!

  16. Devin R. Olsen Metal_Man says:

    Fixed it…

    It had to do with the width of the sub list and the margin I was using.

    Hope this will help anyone with the same issue.

    Thanks

  17. Devin R. Olsen Metal_Man says:

    I modified your code to work in IE7, but it shifts the alignment of every other item in the sub menu. I will continue playing with this to see if I can get it working. In the mean time do you have any updates for IE7? Thanks

  18. Devin R. Olsen Metal_Man says:

    Great Tutorial…! I have been playing around with my own Pure CSS navigation bar and couldn’t get it working in IE. Your .htc file did the trick. Thanks

  19. Devin R. Olsen Mohamed Arif says:

    Thanks.

  20. Devin R. Olsen Jota P. says:

    Yay! thank you!

  21. Devin R. Olsen SauBAr says:

    Thanks!

  22. Devin R. Olsen Devin R. Olsen says:

    I always enjoy feedback from my readers.

Leave a Reply