突出显示表格行

我正在使用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方法中不能访问颜色变量（我相信是因为范围规则）。我的问题是如何做到这一点颜色var可以在mouseout方法中访问？

来源

2012-01-23 objlv

您应该在外部CSS选择器中声明原始颜色，并使用jQuery对其进行更改，这样您就不需要保留以前的颜色。它也让你的HTML更少。 –

如果您只需突出显示悬停行使用CSS，则完全不需要javascipt。 – dfsq

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

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

然后在CSS：

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

来源

2012-01-23 14:21:18

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

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

仅仅因为你添加：悬停到一个选择器，这并不意味着选择器链必须停在那里。这是突出显示表格行的一种不错而且更简洁的方式，而不是使用JavaScript和类来完成所有这些疯狂的事情，只是为了悬停的表格单元格添加背景。

来源

2012-01-23 14:27:22

突出显示表格行

回答

相关问题