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元素（docs）中设置<tr>属性：

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

你将获得免费的原始背景颜色（在第7场比赛中以铬24.0.1312.57米和FF 18.0.2进行测试）。

托比

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

3 个答案: