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

仅仅因为你添加：悬停到选择器，这并不意味着选择器链必须停在那里。这是一个很好的，更清晰的突出表行的方法，而不是用JavaScript和类来做所有这些疯狂的东西，只是为了在悬停时为表格单元添加背景。

Answer 2

添加一个类，然后在不需要时删除它。

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

然后在CSS中：

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

突出显示表行

2 个答案: