背景顏色是不是在鼠標懸停改變，mouseout事件

Question

我有一個簡單的HTML表格佈局爲：

<table class="grid"> 
<thead> 
<tr><th>1st Col</th><th>2nd Col</th><th>3rd Col</th><th>4th Col</th></tr> 
</thead> 
<tbody> 
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr> 
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr> 
<tr><td>AAaa</td><td>BBbb</td><td>CCcc</td><td>DDdd</td></tr> 
<tr><td>aaAA</td><td>bbBB</td><td>ccCC</td><td>ddDD</td></tr> 
</tbody> 
</table> 

此表的背景色的CSS定義：

table.grid > * > tr > * { 
    border-right: 4px groove #D1D1D1; 
    border-bottom: 4px groove #D1D1D1; 
    padding: 0; 
    background-color: #FFFFCC; 
} 

因此，在負載，此表的行是淡黃色（#FFFFCC）。當用戶將光標移動到表格上時，我希望相應行的顏色發生變化以產生突出效果。我用下面的jQuery代碼來完成高亮效果：

$("body").on("mouseover mouseout",".grid > tbody > tr", function(){ 
      $(this).toggleClass("highlight"); 
}); 

和亮點類又是在相同的CSS文件：

tr.highlight{ 
    color: red; 
    font-style: italic; 
    background-color: green; 
} 

我發現，除了背景顏色相應的行，字體樣式和字體顏色正在改變。所以代碼在某種程度上工作，但並不完全。

但是，如果我從CSS，即在負載表是白色的消除背景顏色樣式，行的背景顏色變爲綠色，同時移動光標放在它：

table.grid > * > tr > * { 
    border-right: 4px groove #D1D1D1; 
    border-bottom: 4px groove #D1D1D1; 
    padding: 0; 
    //background-color: #FFFFCC;<--- I have to remove this line 
} 

你有任何想法，如果它已被賦予加載背景色，我如何更改行顏色？

Answer 1

這些CSS選擇器非常糟糕，而且您不需要JS來進行懸停效果。簡化它。

tr.highlight不會影響任何東西，因爲您將背景色設置爲tr的子項，而不是tr本身。

另外，閱讀約CSS specificity。

---

這裏有一個工作代碼：

table.grid tr td { 
 
    border-right: 4px groove #D1D1D1; 
 
    border-bottom: 4px groove #D1D1D1; 
 
    padding: 0; 
 
    background-color: #FFFFCC; 
 
} 
 

 
table.grid tr:hover td{ 
 
    color: red; 
 
    font-style: italic; 
 
    background-color: green; 
 
}

<table class="grid"> 
 
<thead> 
 
<tr><th>1st Col</th><th>2nd Col</th><th>3rd Col</th><th>4th Col</th></tr> 
 
</thead> 
 
<tbody> 
 
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr> 
 
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr> 
 
<tr><td>AAaa</td><td>BBbb</td><td>CCcc</td><td>DDdd</td></tr> 
 
<tr><td>aaAA</td><td>bbBB</td><td>ccCC</td><td>ddDD</td></tr> 
 
</tbody> 
 
</table>