Getting the background color of a table row into a variable before changing it jQuery

I have a code to change the color of a row of a table when I hover over it. I want to grab the 开发者_运维问答background color of a row before it changes and then have it change back to its original color using that background color variable.

For some reason, even though I get the background color into the variable before the background color changes, the variable ends up being the new background color set by a CSS modifier.

$(document).ready(function() {
   $(function() {
        $('.rowHover tbody tr').hover(function() {
            // Get color of row to replace it later
                bgColor = $(this).css("background-color");
            $(this).contents('td').css({'border-bottom': '1px solid #888'});
            $(this).children().css('background-color', '#f1f1f1');
        },
        function() {
            $(this).children().css('background-color', 'bgColor');
             $(this).contents('td').css({'border-bottom': '1px solid #ccc'});
        });
    });
});

Do you guys have any idea how I can accomplish this? The table that I am having this hover effect on has different color rows and I don't want the background color information to be lost once the user takes their mouse off the row.

Thanks! Chris

For one thing:

$(this).children().css('background-color', 'bgColor');

should be

$(this).children().css('background-color', bgColor);

You probably also want to move the declaration of bgColor out of the hover function and declare it with var.

Why not just use .toggleClass?

http://api.jquery.com/toggleClass/

You could accomplish everything your trying to do here with a couple specific style elements and to toggle on and off.

var bg=$(this).css("background-color"); //here you get the color
$(this).css("background-color","#FFFFF");// here you set the color