: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(){
               $(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

Comments

1. Aug 7, 12:18 AM
   ethan Andrews said:

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

2. Feb 20, 12:51 PM
   Livingston Samuel said:

   Similar to your script I’ve come with a general idea that will help in implementing the hover function for non-anchor elements in IE6. you can find it here

   Hover for non-anchor elements in IE6

3. Feb 21, 01:33 PM
   rafik said:

   excellent; nice job, well done

4. Dec 23, 01:58 AM
   gaurav said:

   nice job ..thanks a lot..was Cursing the IE ..jQuery as always rocks

Still need more? View the archives