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