:hover Pseudo Class Bug Fix for IE6

July 5, 2007 | Filed Under Code Snippets, Web Design by Robert

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(){
               $(this).addClass('over');
        }, function() {
               $(this).removeClass('over');
        });
});
</script>

The CSS:

.over {background-color: #ffff00;}

The HTML:

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

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