Getting the background color of a table row into a variable before changing it jQuery
<p>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.</p>

<p>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.</p>

<pre><code>$(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'});
        });
    });
});
</code></pre>

<p>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.</p>

<p>Thanks!
Chris</p>
