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.

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. < This will look parse your stylesheet and search for all :hover rules and replace the rule with a scripted event. I really like this solution because it enables you to use standard code for IE7 and FireFox while using this to apply a "fix" to IE6. Here is the final code for my example, enjoy!

index.cfm stylesheet.css

 

This entry was posted on January 1, 2008 at 5:54 PM and has received 63250 views. Comments 12 | Print this entry.