January 20, 2007

Adding a Hover Effect in IE6 versus IE7

One way to enhance a table style is to introduce a hover effect on the table rows: when the user is moving across the table with their mouse, the current row they are on will change color.  This is something that you frequently see in interface design in internal web applications which help users view a particlar row of data.

Creating a hover effect in Internet Explorer 7, Opera 9 or Firefox is pretty straight forward since all you have to do is use the CSS :hover dynamic pseudo-class on elements other than links. It would look like something like this:

table.class tr:hover {
       background-color:#AAAAAA; color: #FFFFFF
}

In Internet Explorer 6 it is only supported on links, so you have to use a little JavaScript.

Here is an example of using JavaScript to plug the holes in browser support for CSS and here is the code (.zip) too.  The important job, however, is to make your table usable without the highlighting.  That way, it doesn't matter to your users if they don't get the highlighting effect, which will still be the case if they have JavaScript turned off in Internet Explorer 6. 

Hopefully, with the IE7 adoption rate steadily increasing, support for IE6 will become less of a neccessity and more of a niceity. :)