Creating table with rollover effect using Divs & CSS
I recently had to create a simple html page with the following:
- Table with 4 columns
- Header row
- When user mouse-over a cell, entire row is highlighted – rollover effect
- Row is click-able, take user to another page
I thought OK, that’s so simple, until I realized that CSS hover rule (i.e. tr:hover) won’t work on IE. IE ignores CSS hover rule other than the ones on link (a:hover). I know there is a hack for IE (Google “csshover3.htc” and you will find tons of postings) but quickly noticed that table row rollover effect with CSS/csshover3.htc is a bit finicky on IE — Of course! Why don’t we have one universal browser?!? Ugh.