Categories
CSS & HTML Tips JavaScript Tips & Tutorials

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

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!

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.

11 replies on “CSS Table Hover Effects for <tr> and <td>”

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.

Thank for the tip!

behavior can’t get the validation of the W3C CSS validator, do you have some alternative ?

Comments are closed.