Question

After much google searching and looking through other posts here i still can’t work out if this is yet possible. I want to basically have a set background colour on my table rows that fades to another color quickly on :hover – Is this possible with Jquery?

I’m using multiple tables which will have, or would like to have, different colors for background hover, at the moment I’m using just CSS to do an hover event but obviously i want to try add a subtle but nice effect as they are nice chunky table rows.

****EDIT****

I found a solution: I am using Jquery UI –

$('tr').mouseover(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "red" }, 1000);
});

$('tr').mouseout(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "#666" }, 1000);
});

Answer 1

Since you would like to have different colors for background hover event for your table cells, this jsFiddle shows you how to use the background color property to change the colors of each cell on mouse hover via a Pseudo Color Map of NTSC Colors.

There’s no jQuery or other library required since this pure CSS solution keeps up with the users mouse position quickly.

I think using animated fade in the example I provided would make too many cells linger with transitions causing confusion. That said, it’s still easy to add in jQuery animate effects if needed, but depends on your table layout scheme.

Here’s a revised jsFiddle using jQuery.