JQuery更改表格单元格和行背景颜色悬停

Question

基本上，当我将鼠标悬停在表格中的一行上时，我希望该行的背景颜色更改为“黑色”，并且特定的单元格或td我正在盘旋以更改到'红'。

即，当悬停时发生两个事件。我知道如何做到这一点，但不是两者。

这可能使用jQuery吗？

Thx给大家他们的贡献，我已经复制了你们所有人。

Answer 1

简单的CSS是不够的：

tr:hover{ 
background-color:red 
} 

td:hover{ 
background-color:blue 
} 

http://jsfiddle.net/nRuXn/1/

Answer 2

如果行和单元格都在同一个容器中，则可以将mouseover事件附加到该容器并修改处理程序中的子级。

Answer 3

一些类添加到你想成为红认为，TD（让调用类的rdClass'）和行“blkClass”：

<table> 
<tr class='rdClass'> 
<td> 
     1 
</td> 
<td class='blkClass'> 
     2 
</td> 
<td> 
     3 
</td> 
</tr> 
</table> 

$(document).ready(function() 
{ 
    $(".rdClass").mouseover(function() 
    { 
     $(this).css("background-color", "red"); 
    }); 

    $(".blkClass").mouseover(function() 
    { 
     $(this).css("background-color", "black"); 
    }); 
}); 

Answer 4

添加悬停监听到所有的行和TD的，增加了并删除一个类，然后使用CSS为行和单元格对该类进行不同的样式设置。

Working Demo

jQuery的

$('tr, td').hover(function() { 
    $(this).addClass('highlight'); 
}, function() { 
    $(this).removeClass('highlight'); 
}); 

CSS

tr.highlight { 
    background-color: red; 
} 

td.highlight { 
    background-color: black; 
} 

Answer 5

$("td").hover(function(){ 
    $(this).css("background-color", "red"); 
    $(this).parrent('tr').css("background-color", "black"); 
}); 

Answer 6

$('td').hover(function() { 
    $(this).parent().children().css("background-color", "black"); 
    $(this).css("background-color", "red") 
}); 

$('tr').mouseleave(function() { 
    $(this).children('td').css("background-color", "white");// or whatever 
});