在 jQuery 中悬停表格行时存储背景颜色

Question

我有一个 ASP.NET GridView。根据所显示字段之一的值，每一行具有不同的颜色。有两个可能的值，因此可以有两种不同的颜色。

现在我想突出显示鼠标悬停在 GridView 上的行。下面的脚本工作完美，但是一旦我将鼠标悬停，任何行的颜色都会变成白色。

我想知道是否有一种方法可以在鼠标悬停时以某种方式存储该行的“原始”颜色，并在鼠标悬停时将其放回原处。

          $(document).ready(function() {
            $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
                    $(this).css("background-color", "Lightgrey");
                }, function() {
                    $(this).css("background-color", "#ffffff");
                });

            });

我尝试了这个对我来说似乎很合乎逻辑的解决方案，但它不起作用，因为脚本完成执行后不会存储颜色值：

$(document).ready(function() {
            $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
                    var color = $(this).css("background-color");
                    $(this).css("background-color", "Lightgrey");
                }, function() {
                    $(this).css("background-color", "#ffffff");
                });
            });

有人可以提供解决方案吗？谢谢

Answer 1

您可以将以前的（原始）值存储在 data 中 属性：

$(document).ready(function() {
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
        var $this = $(this);

        if (!$this.data('originalBg')) { // First time, no original value is set.
            $this.data('originalBg', $this.css('background-color')); // Store original value.
        }
        $this.css("background-color", "Lightgrey");
    }, function() {
        var $this = $(this);

        $this.css("background-color", $this.data('originalBg'));
    });
});

如果您使用 HTML5，则可以直接在 元素中设置 data 属性（<一个href="http://api.jquery.com/data/#data2" rel="nofollow">docs)：

<tr style="background-color: #abc123;" data-originalBg="#abc123"> ... </tr>

这样，您就可以简单地摆脱：

$(document).ready(function() {
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
        $(this).css("background-color", "Lightgrey");
    }, function() {
        $(this).css("background-color", $this.data('originalBg')); // Already set via the data-originalBg attribute of the `tr`
    });
});

Answer 2

您是否尝试过

var color = '';
$(document).ready(function() {
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(
        function() {
            color = $(this).css("background-color");
            $(this).css("background-color", "Lightgrey");
        }, 
        function() {
            $(this).css("background-color", color);
        });
    });
});

这种方式，变量是全局的，因此会记住该值。

Answer 3

如果您的突出显示颜色是静态的（看起来是静态的），那么另一种方法是创建一个名为 : 的类

.highlight {
    background-color: #efefef !important;
} 

，然后简单地：

$("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
    $(this).addClass("highlight");
}, function() {
    $(this).removeClass("highlight");
});

您将免费获得原始背景颜色（在 chrome 24.0.1312.57 中测试） m 和 FF 18.0.2（赢 7））。

托比