CSS hover selector fix for IE6
The hover selector is wonderful css technique that can add style to an element as well as improve usability. Most people use it to style links so that users are aware of the link they are hovering over. One common technique is to underline all of the links on a page and then remove the underline when a user hovers over the link. Again this improves both the look of the page as well as usability. Another technique I enjoy is changing the background color of a row when a user hovers the row. This can be achieved by simply using the :hover pseudo-class. Here is a screen shot of my example.
The problem with this technique is it works in all browsers except IE6, of course. IE6 only supports the :hover pseudo-class on anchor () tags. So how can we fix this so that all users see our row highlight? There are at least 2 solutions that I know of. The first involves a little JavaScript and I found a great example of how to do this on www.sidesofmarch.com. The example basically uses prototype to grab all of the rows and apply a class to them. You could easily do this in jquery, ext or spry as well.
if (!window.XMLHttpRequest) {
// IE6, older browsers //new HoverBehavior('tr');
$$('table.hover tr').each( function(e) {
Event.observe(e, 'mouseover', function() {
Element.addClassName(e, 'hover');
});
Event.observe(e, 'mouseout', function() {
Element.removeClassName(e, 'hover');
});
});
}
});
The second solution is to use the csshover behavior that was developed by Peter Nederlof. IE supports so called behaviors; .htc or .hta files that can be attached to specific elements using css making it possible to let these elements behave in a special way. You can visit Peter's site to learn more about it. Once you download the csshover.htc file you simply add the following to your stylesheet.
index.cfm
<head>
<title>hover test</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<body>
<table cellpadding="0" cellspacing="0" border="0">
<caption>Cleveland Area ColdFusion Programmers</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dan</td>
<td>Vega</td>
<td>danvega@gmail.com</td>
<td>http://www.danvega.org/blog</td>
</tr>
<tr>
<td>Brian</td>
<td>Meloche</td>
<td>bmeloche@gmail.com</td>
<td>http://www.brianmeloche.com</td>
</tr>
<tr>
<td>Todd</td>
<td>Sharp</td>
<td>cfsilence@gmail.com</td>
<td>http://www.cfsilence.com</td>
</tr>
</tbody>
</table>
</body>
</html>
behavior:url("csshover.htc");
}
table {
font-family:Arial,helvetica,sans-serif;
font-size:12px;
border:1px solid #ddd;
border-collapse:collapse;
}
caption,th,td {
padding:4px;
border:1px solid #ddd;
}
caption {
background:#ddd;
color:#242424;
}
tbody tr:hover {
background: #242424;
color:#fff;
cursor:pointer;
}
