jquery - 在 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属性直接在 <tr>元素(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`
    });
});