Question

当我将鼠标悬停在表格上时，我有一个代码来更改表格的颜色。我希望在更改之前抓取一行的背景颜色，然后使用该背景颜色变量将其更改回原始颜色。

出于某种原因，即使我在背景颜色发生变化之前将背景颜色添加到变量中，变量最终也会成为CSS修改器设置的新背景颜色。

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

你们有什么想法我能做到这一点吗？我有这种悬停效果的表格有不同的颜色行，一旦用户将鼠标从行上移开，我不希望丢失背景颜色信息。

谢谢！克里斯

Answer 1

一方面：

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

应该是

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

您可能还想将bgColor的声明移出悬停函数并使用var声明它。

Answer 2

为什么不使用.toggleClass？

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

您可以使用几个特定的样式元素完成您尝试执行的所有操作，并打开和关闭。

Answer 3

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

在更改jQuery之前，将表行的背景颜色变为变量

3 个答案: