使用jQuery突出显示行

Question

我希望有一个功能，当鼠标滑过它时会突出显示表格的行。我目前有一个函数，每隔一行创建一个备用行颜色，我想修改它而不是创建一个单独的函数。这就是我所拥有的：

$(".tblRows tr:even").addClass("altColor");

其中

.altColor TD {
background-color:#f5f5f5
}

我的HTML是

<table class="tblRows">
...

我知道有一个jQuery函数hover（）但我不知道如何将它与我所拥有的相结合。当我徘徊时，我希望它使用class =“hilite”

有可能吗？

Answer 1

$('.tblRows tr')
    .mouseenter(function() { $(this).addClass('hilite'); })
    .mouseleave(function() { $(this).removeClass('hilite'); };

Answer 2

您是否有理由不仅仅使用CSS？

#myTable tr:hover {
    background: orange;
}

无法在IE6中的<tr>上运行，但可以在其他地方使用。

示例： http://jsfiddle.net/auWGU/

Answer 3

使用hover：

$(".tblRows tr").hover(function() {
    $(this).addClass("hilite");
}, function() {
    $(this).removeClass("hilite");
});

这是简写：

$(".tblRows tr").mouseenter(function() {
    $(this).addClass("hilite");
}).mouseleave(function() {
    $(this).removeClass("hilite");
});

此处示例：http://jsfiddle.net/andrewwhitaker/kQvJ3/

Answer 4

您需要使用hover-function向表中的每一行添加一个鼠标悬停事件处理程序。 E.g：

$('.tblRows tr').hover(function () {
    $(this).toggleClass('hilite');
},
function () {
    $(this).toggleClass('hilite');
});