Robert Spangler

UI/UX designer & front-end developer


:hover Pseudo Class Bug Fix for IE6

For those of you familiar with the :hover pseudo class, you probably know that IE6 and below is not.

A simple example of the :hover pseudo class in action is when you mouse over a Hyperlink and it changes color, or it becomes underlined or something dazzling like that. A more advanced example is applying :hover to other tags such as a <td> to make the data cell of a table change color, this is the example I’m going to talk about today.

To get this working in IE6 I have gone through a large amount of resources with javascript fixes, that work—but can be overly complicated. I have also attempted to use some .htc behavior fixes, which can be incredibly finicky and are also invalid CSS according to W3 standards.

But don’t worry! There is hope! Finally after wrestling with this issue for a long time and doing some good investigating for a decent fix, I found it through the use of jQuery.

The Script:

<script src="/include/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
        $('#my-calendar td').hover(function(){
        }, function() {

The CSS:

.over {background-color: #ffff00;}


<table id="my-calendar">
        <td>hover over me!</td>

Basically—similar to some JavaScript examples you may have seen jQuery uses a mouseover (hover) and adds the “over” class to your <td>. Likewise—when you mouse out it simply removes the class. It’s that simple and it actually works!

View the Example
Download JQuery

9 Responses to “:hover Pseudo Class Bug Fix for IE6”

  1. ethan Andrews

    thank you! I too have been looking for a good solution to this problem, you rock.

  2. Kyle Skrinak

    You posted this nearly 3 years ago, and didn’t tell me! 😉 This is awesome and much better than the htc fix I was using. Much, deep gratitude for your posting it.


Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

About Robert

I work with clients ranging from local small businesses and non-profits to large Fortune 500 companies.

If you think I'm the right guy for your project, please feel free to give me a shout.

I am a full-time freelance website designer and front-end developer from Baltimore, Maryland, currently living in Nairobi, Kenya.

I design and code for user experience on the web with special attention on mobile devices. I come from a background in eCommerce and lead generation, which I'm very good at. I spend most of my time personalizing and creating customized WordPress themes for clients. Other than designing websites I spend time with family, study, occasionally tweet, and rarely +.