CSS Table Hover Effects for <tr> and <td>

by Yang Yang on January 9, 2009

Share This Article:

Subscribe to Kavoir:

Without using any javascript, this is the simplest way to make css hover works on tr and td in tables across browsers including IE.

IE is known for not implementing generic hover effect for HTML tags other than <a>, however by the help of a bit of spice, we can make it to happen on all tags.

Download csshover3.htc which is the newest version as of now and use it as:

body {
	/* the path to csshover3.htc should be relative to web page */
	behavior:url("csshover3.htc");
}

Now you have implemented generic hover effect for all HTML tags in IE and can use CSS selectors such as tr:hover and td:hover to style for table row tr hover effects and table cell td hover effects.

Not only that, with csshover3.htc you can literally style the hover state of any HTML elements now such as <li>. Isn’t it exciting!

Share This Article:

Subscribe to Kavoir:

You should also read:

{ 11 comments… read them below or add one }

Milkman February 25, 2009 at 10:43 pm

What is this magic? It works , no idea how tho!!

Yang Yang February 26, 2009 at 6:45 pm

@Milkman – behavior is a ms ie proprietary css rule and all the magics lie in csshover3.htc. It’s a way to script DHTML behaviors as HTML Components (HTCs).

http://msdn.microsoft.com/en-us/library/ms531018(VS.85).aspx

Milkman February 26, 2009 at 7:40 pm

Thanks for info Yang Yang

Yang Yang February 27, 2009 at 8:43 pm

@Milkman – Always a pleasure! :D

Jorge Vilela August 6, 2009 at 11:18 pm

Thanks very much! It works!

oldtimercurt December 27, 2009 at 2:18 am

I inherited this website. I am very much a novice developer. I cannot get the csshoverfix to work with the website. Works great in FF and IE 8 but not IE6. I’m extremely frustrated with this.

Yang Yang February 26, 2010 at 4:10 pm: This hack is created specifically for IE6. The generic hover effects work in all other modern browsers without the hack.

Reply

Pedro June 6, 2010 at 10:32 am