懸停在表中預置背景顏色更改背景顏色

Question

我想改變我的整個tbody使用CSS和的背景顏色：懸停。當已經設置了背景時，我無法使懸停背景更改。我根本做不到。我甚至嘗試過！驅魔者，但沒有運氣。

<table border="1"> 
    <tbody> 
    <tr> 
     <th>Testing</th> 
     <td>Some stuff</td> 
    </tr> 
    <tr> 
     <th>Testing</th> 
     <td>Second more stuff</td> 
    </tr> 
    </tbody> 
</table> 

我的CSS

th { 
    background: red; 
} 
tbody:hover { 
    background: blue !important; 
} 

http://jsfiddle.net/W4cJh/1/

正如你所看到的，如果後臺尚未設置懸停工作正常。從th標籤中刪除背景：紅色，以查看它的工作原理沒有預設的顏色。

Answer 1

那是因爲TH是桌子的一個孩子，所以在技術上是最重要的。通過將TABLE背景設置爲藍色，它不會覆蓋TH背景。

爲了解決這個問題，補充一點：

tbody:hover th { 
    background: blue; 
} 

（。你可以跳過!important小號這些都是不好的做法）

Example fiddle is here.

Answer 2

這將做的工作適合你，無需!important：

th { 
    background: red; 
} 
tbody:hover, 
tbody:hover th { 
    background: blue; 
} 

演示：http://jsfiddle.net/W4cJh/4/