高亮显示表格行

Question

我使用jquery来突出显示表行。这是我的代码：

$('table#results tr').mouseover(function() {
  var color = $(this).css("background-color")
 $(this).css("background-color","yellow !important");
}).mouseout(function() {
 $(this).css("background-color", ""+color+" !important");
});

我的目标是保持行的原始颜色可变。在mouseout方法中无法访问颜色变量（我相信是因为范围规则）。我的问题是如何在mouseout方法中访问color-var？

Answer 1

这可以用纯CSS完成，在我看来这是一个更好的解决方案：

table#results tr:hover td {
  background-color: yellow;
}

仅仅因为您在选择器中添加了：hover，并不意味着选择器链必须停在那里。这是一种突出显示表行的好方法，而且比在悬停时使用JavaScript和类为表单元格添加背景做所有这些疯狂的事情要干净得多。

Answer 2

改为添加一个类，然后在不需要时将其删除。

$(function() {
    $('table#results tr').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});

然后在CSS中：

.hover { background-color: yellow !important; }