CSS懸停整行以及單個單元格

Question

如何添加懸停樣式以突出顯示光標所在的行以及另一個懸停類以突出顯示光標所在的特定單元格（比較顏色等）上？

HTML

<table> 
<tr> 
<td> </td> 
<td> </td> 
</tr> 
</table> 

CSS

tr:hover td {bg-color:; color:;} /** Highlights row**/ 

Answer 1

改用

tr td:hover {bg-color:; color:;} /** Highlights row**/ 

Answer 2

您需要與此類似。

tr:hover {background-color:#000; color:#ff0000;} <!-- row hover 
tr td:hover {background-color:#CCC; color:#fff;} <!-- individual cell hover 

Answer 3

如果你想要的顏色的特定行比的方法之一是給它的類名和改變顏色，當鼠標懸停在該類別

HTML

<table border=1> 
    <tr class="first"> 
    <td> some value</td> 
    <td>some value </td> 
    </tr> 
    <tr class="second"> 
    <td>some value </td> 
    <td>some value </td> 
    </tr> 
    <tr class="second"> 
    <td>some value </td> 
    <td>some value </td> 
    </tr> 
</table> 

CSS

.first:hover { 
    color: red; 
} 

嘗試運行此代碼。這裏，當你將鼠標懸停在第一行上時，它將改變第一行的顏色。