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

【问题标题】：Store background-color when hover a table row in jQuery在 jQuery 中悬停表格行时存储背景颜色
【发布时间】：2011-12-01 06:55:18
【问题描述】：

我有一个 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");
                });
            });

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

【问题讨论】：

顺便说一句，您的解决方案的问题是color 变量只存在于在定义它的函数中（hoverIn）。 hoverOut 函数将永远无法访问它。

标签： jquery hover background-color

【解决方案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，您可以直接在<tr> 元素（docs）中设置data 属性：

<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`
    });
});

【讨论】：

神奇的效果就像一个魅力！你能解释一下 originalbg 是什么吗？它是一个属性还是一个变量？
HTML5 示例是非常好的方法，我建议这样做。对于目前不支持 HTML5 的浏览器，可以包含 html5shiv 脚本code.google.com/p/html5shiv
@CiccioMiami originalBg 只是用作我用来保存原始背景颜色的键（$this.data('originalBg', $this.css('background-color')) 将 background-color 的 CSS 值保存在键 originalBg 下）。我使用它来检索原始值（$this.css("background-color", $this.data('originalBg')); 将background-color 的 CSS 值设置为原始存储的值）。（这有意义吗？）

【解决方案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);
        });
    });
});

这样变量是全局的，所以会记住值。

【讨论】：

【解决方案3】：

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

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

然后简单地说：

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

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

托比

【讨论】：