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

About Author:

I work as a full time frontend web developer at ISITE Design located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

Follow Me:
TwitterFacebookGoogle Plus

79 Responses to “Fix CSS Pseudo Hover Class”

  1. Many thanks for this post, I am a big fan of this web site would want to be updated.

  2. Dave says:

    We moved to a new dedicated server (SiteGround Hosting/Linux/WHM Interface & cPanel), and for some reason the cssHoverFix.htc file isn’t working anymore. It worked for several years on our old server (Rackspace/Linux/Plesk). Any ideas??

    We are currently building a new database website for this domain, but won’t be finished for another week or so. Hate for visitors to not be able to navigate freely. Any help you could give us would be greatly appreciated.

    Dave

  3. Eric says:

    at the top of your HTML file solves it for post IE7.
    Formatting was the simple solution to get this menu IE friendly.
    As stated repeatedly the htc solves the ancient IE needs.

  4. Paul says:

    Funny how this post was written in 2009 and 3 YEARS LATER people start complaining that it’s outdated.

    It’s a great post and still relevant to me, even now!
    THANKS!

    ———

    This is for the ‘let IE6 die/rust’-people:

    I would looove to ‘let IE6 die’.
    In fact, if I were God I’d have killed it years ago.

    But, as I’m a mere mortal working for a global corporation, I am still required to develop for IE6 (and all the other browsers).

    This is mainly because, for some strange reason, my employer wants to reach the 20% Chinese still browsing with IE6. (Can’t see why… as it’s only 300 million people in the biggest growing market ever.)

    So, here’s the hard truth:
    As a web developer you can only drop support for IE6 when the people you need to reach have stopped using it.
    No, not the other way around. Not in the real world anyway.

    Fortunately for a lot of web developers that’s already a reality. Not for me though…. soon!

    Oh, and while I am at it:
    If I were God (or some Dark Lord)… I’d create ONE browser to rule them all. This browser would behave exactly the same on mobile, desktop/laptop, iOS, Windows, android etc. etc. etc. and I’d make sure it would adapt to newer coding standards while retaining perfect backwards compatibility with the older coding standards.
    BUT HEY, WAIT A MINUTE!
    Wasn’t that EXACTLY what the Flash plugin did for almost 10 years, before Apple killed it?!
    Man, if I were God I’d punish the CEO of Apple…

    Hmmm…

  5. niazjoo says:

    thanks for your nice toturial. but we shouldnt work on IE6 anymore. let it die!!!

  6. bla says:

    Don’t bother supporting IE6, let them upgrade their browser. It costs nothing and takes 30 seconds, and saves Devs hours of coding…

  7. msrosyidi says:

    I’ve tried the demo using IE 6 (I never want to update IE) and it works as I need. Thanks.

  8. What if the IE6 users are only you who are making your page look nice in IE6 :(

    No offense to your nice tutorial!

  9. Marlon says:

    Dude..thank you so much!i was after that code for so long…oh my gosh…it´s so simple…i was waiting for a big code!hehehee

  10. charlesse says:

    И здесь

  11. miriam says:

    hi,
    thank you so much for all your help so far! i used your menu suggestion and altered it to fit my needs (i have background images that change on the hover). it works perfectly in mozilla but i went to check it in IE 5 and it doesnt seem to be showing the submenu. i added the body{behavior:url(cssHoverFix.htc);}, and i also uploaded the csshoverfix.htc file to the server, but its not working. is there a specific place i should be saving it in my server?
    please advise
    thanks so much!!!
    miriam

  12. Sumanta says:

    thanks for the fix.

    just to inform you this site’s menus not working in my ie6.hope u will find a fix for that too.

    • @Sumanta – You are correct, however it is time as a web community for us to stop supporting IE6. This article was written will over three years ago when it was a little bit more acceptable to support such an older browser.

  13. Craig Edward says:

    Hi Devin,

    Thanks so much for this information! I would like to use this as the basis for a new site for a not-for-profit organization. I am changing the colors and widths, etc, but the core of what I want is coming from your webpage. Am I free to use your code this way?

    Thanks again for the info!

  14. Jennifer says:

    We are having issues with 7,8, and 9 as well. Any input would be awesome. Most people on threads who figure out how to fix it say they, “Have it.” and don’t actually show how to fix it. Very annoying.

    • @Jennifer – I’m sorry you are having issues, however I must point out that his tutorial is not for IE7,8 or 9. This is for IE5 and 6 only.

      IE7++ fully supports the CSS2 Pseudo hover, and therefore this tutorial is meaningless for you. If you are having troubles getting the :hover pseudo selector to work at all, post a link or put together a jsfiddle.net for me and I will have a gander and be able to further assist.

      Thanks!

  15. Samey says:

    Hi first thanx for this helpful info i created css horizontal menu with help of your previous article but not working in IE.

    So found this update on your site but i really don’t undersand where should i put this body{behavior:url(cssHoverFix.htc);} and should i upload .htc file on our sever please help and check this is it working fine here?

    worldfree4u.com

  16. Ariel says:

    Thanks a lot =D. You save my life, really. sorry about the english

  17. Eddie says:

    Do you know if there is a hover fix for ie9. Your menu is exactly what I have been looking for for years but it does not work in ie9.

  18. Ashish says:

    It’s works fyn but after uploading the files only.

    before uploading (I mean on the local server), this never works.

    I tested this on IE tester.

    Anyway thanks

  19. Win says:

    Thanks for the code!

    P.S. The timestamp on the comments is matching my system clock? I was wondering why everyone’s comment was on the same exact minute.

  20. Donna L gayer says:

    Hi Devon

    Other sites tell me to do these things:
    2. Add the html code shown below to your web page between the tags;
    @import url(“menuh.css”);
    and
    4. Add the html IE sniffer code shown below to your web page between the tags and just before the ending tag. This code has to be the last css loaded. Do not follow it with css that will overwrite these rules. Please realize that the “sniffer code” is nothing more than css rules specifically designed to make IE work correctly.

    #menuh{float:none;}
    body{behavior:url(csshover.htc); font-size:100%;}
    #menuh ul li{float:left; width: 100%;}
    #menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}

    I don’t see these directions here. Aren’t they needed?

    Thanks for your help.

    • @Donna – Indeed it is good practice to condition out IE only script for the desired browser or browser versions. However, this script is smart enough to do this for you already and is why I opt to leave the condition out.

      If the browser fails to support :hover on all elements, the the script takes action. Other wise it leaves things along and defaults to browser behavior of using css :hover for all elements.

  21. [...] NOTE: The above example works in IE5 and IE6 because of the pseudo-hover fix that can be found here. Please read this pseudo-hover fix tutorial if you are trying to get this or [...]

  22. free DSi points says:

    There is some solid information on this blog. I enjoy your writing. I’ve added the feed to my Google Reader RSS subscriptions and will give you a mentioning over at my blog. I did get some errors with how fast this blog entry loaded. Might be a problem to optimize.

  23. gwyn says:

    THANK YOU!

    I thought I’d have to recode the menu CSS on my site just to work on IE6 but found this gem instead. Eternally grateful.

  24. Mira says:

    Hi, Could u please tell me where i have to save pseudo.htc file in my browser. Im using Netbeans6.1. i think this might be the reason for my program to not able to open the sub menus.

    Thanks in advance

  25. [...] 1) Fix CSS Pseudo Hover for IE6 and below here! [...]

  26. Richard says:

    Thanks… It will be great when IE6 finally dies!

  27. Thank you! Finally a simple straight-forward solution to this issue.

  28. Zakir Saleem says:

    This does not work with me. i put the code ( body{behavior:url(cssHoverFix.htc);} ) in my css file. my css file and the htc file are in the same folder where my HTML Files are. What did i do wrong.

  29. Russel says:

    This is really AWESOME code. It’s easy to follow, well taught by you, and easy to modify. This has helped me tremendously. THANKYOU!!!

  30. Nicholas says:

    Hi,

    Great tutorial… but I have one problem, which has me in knots:

    I have the following in my webpage, displaying just below your menu code:

    Occupation?

    Secretary
    Web Designer
    Librarian
    Forklift Operator

    The menu items seem to not fully “cover” the drop-down. This only happens in IE.

  31. Nicholas says:

    Hi,

    Great tutorial… but I have one problem, which has me in knots:

    I have the following in my webpage, displaying just below your menu code:
    Occupation?

    Secretary
    Web Designer
    Librarian
    Forklift Operator

    The menu items seem to not fully “cover” the drop-down. This only happens in IE.

  32. George says:

    Awesome tutorial

    only one question.. what if we want the items to display in that same order but on the right hand side??

    keep in mind, when I float: right.. the items rearrange with the fourth item becoming the first in the list if you are reading the page from left to right

    thanks for this great insight

  33. Maskull says:

    I can’t download your hover.htc file.

    It keeps giving an Error 404 – page not found!

    Can you send it to me via email or email me where I CAN download it. Thanks.

  34. Bettan says:

    Thanks for your tutorials- very informative! I´ve followed your tutorial for Pure CSS Vertical Menu and also added this .htc file. I still can’t make it work in IE6 (sorry to say I still have some users on it). Any suggestions on what to look for?

  35. Matt says:

    I dont know if I’m doing this wrong, but I’ve uploaded the htc file to my server, but still when I look at the site it loads with errors on the page that say access is denied to the htc file. Any Suggestions?

  36. Kim says:

    Hi, I have got this working in ie5 but in ie6 it makes the screen flicker black for a split second when you scroll over the link. Im trying to have an image appear next to a text link. It works in everything but ie6

  37. Richard says:

    Hi, Devin, A tech support told me so. In anyway, I cannot upload .htc file to my server. Is it possible to put the JS code directly in the html file and would it still work? Any suggestions on that? Thanks again.

  38. Devin R. Olsen says:

    @Richard, well to be honest I have never worked with a web server that wont support or allow you to upload JS. How strange.. Who told you this? Also I am sorry but this is currently the only solution to being these pseudo hover behaviors to these two lack

  39. Richard says:

    Thank you for providing us with the solution. However, my web server doesn’t support java script, so I cann’t upload the .htc file and it won’t run on the webserver anyway (so I am told). Is there any other solution you can suggest for it to work with IEs? Thanks.

  40. Amy says:

    Thank you very much for the horizontal menu tutorial. When I open the site in IE8 on windows Vista, my sub menu items are not aligned downwards rather sub menu items are displayed side by side in pairs.(ie. 4 submenu items are displayed in two lines with 2 sub menu item in eahc line. Is this something to do with width of submenu item.?Any suggestion to fix will be appreciated.

  41. chris says:

    Thanks so much! Wow. Worked like a charm

  42. Robin Cox says:

    Fantastic! I get to say a nice f*** you to IE 6. Thanks alot for this, you made my day.

  43. Patrick Janser says:

    Cool!
    Thanks a lot for this usefull HTC file.

    I was suprised to see that IE has another bug while solving the path to the HTC file.

    I put the body behavior rule in a special CSS file for IE6 only. As this CSS file isn’t next to the HTML file but in a subdirectory, I specified a relative path to the HTC file, using the CSS as base. But it wouldn’t work. With Fiddler, I realized that IE was doing a wrong hit while getting the HTC file.

    To solve the problem, either :
    - use an absolute path (which isn’t good practice)
    - put your CSS file next to the HTML file (which isn’t always possible, for example if you’re using a CMS with URL aliases).
    - put the body behaviour rule in the HTML header with a server side (PHP) generated URL to the HTC file.

  44. Devin R. Olsen says:

    Lynne and Tarek, all issues have been resolved no?

  45. Devin R. Olsen says:

    I just sent you an email Lynne.

  46. Lynne says:

    Hi Devin, I am having a rather strange thing happen on the flyout and wondered if you had any thoughts. Everything works fine except when I open the 3rd submenu – it opens when I hover over the 2nd submenu however when I then hover over the 3rd submenu and hover off the first item to go down the list of items the entire submenu will disappear. This does not happen with the 2nd submenu, just with the 3rd. If I stay hovered over the first item it seems fine but when I go down the list the whole 3rd submenu disappears. Any ideas? Appreciate your time. Regards

  47. tarek says:

    it just works fine with me ,but i still got a trouble with postioning my banner elements and drop-down-menu under internet explorer 6 ,plz take a look at http://www.tribaly.com/projets/appma/. by the way the right side floats under the left side in that IE6 i’m really confused and don’t know how to fix those bugs

  48. Devin R. Olsen says:

    Hi Lynne, sorry I had to delete the CSS you provided in here cause this a learning center and I cant flood the comments with mics CSS. I did however get a chance to look at the code. Looks good the only thing I could suggest right now (at the office lol) is to cut your css colors down. Instead of #000000 or #FFFFFF you can simply state colors in this fashion #000 or #FFF.

  49. 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.

  50. 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.

  51. 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.

  52. 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.

  53. 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?

  54. 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 ;)

  55. 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;}

  56. 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?

  57. Curt says:

    Thank You!

  58. 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!

  59. Jean Valjean says:

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

  60. Skry says:

    Top job – a quick and easy fix for IE5

  61. 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!

  62. Metal_Man says:

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

  63. 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!

  64. 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

  65. 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

  66. 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

  67. Mohamed Arif says:

    Thanks.

  68. Jota P. says:

    Yay! thank you!

  69. Devin R. Olsen says:

    I always enjoy feedback from my readers.

Leave a Reply