覆蓋TD：帶TR的第一個孩子：懸停？

Question

我有一張桌子，第一個單元格有不同的背景。應用TR：懸停時，這些單元不會更改。

有沒有辦法覆蓋他們當行被徘徊？

#spreadsheet TABLE, #spreadsheet TH, #spreadsheet TD { 
    border:1px solid #CCC; 
} 

#spreadsheet TABLE TR:hover { 
    background:#BAFECB !important; 
} 

#spreadsheet TD:first-child { 
    background:#fff; 
    white-space:nowrap; 
} 

Answer 1

嘗試

#spreadsheet TABLE TR:hover TD { background:#BAFECB !important; } 

是的，它的工作原理。

代碼：http://jsfiddle.net/b9ndZ/1/

Answer 2

的問題是，所述td元件嵌套在tr元件，這意味着td的背景將‘上方’tr的背景。

要讓td的「寬鬆」的背景，你至少有兩個選項：

一個：http://jsfiddle.net/mqchen/WXvkk/
使用:not()僞選擇器可以設置td的背景下，只有當用戶ISN沒有盤旋在tr上。與此不同的是，:not()只適用於某些瀏覽器（IE），如果您使用例如http://selectivizr.com/

table tr:not(:hover) td:first-child { 
    background-color: #eee; 
} 

table tr:hover { 
    background-color: yellow; 
} 

兩個：http://jsfiddle.net/mqchen/zPGW9/
設置td的背景顏色是透明的，當它的父tr懸停。

table td:first-child { 
    background-color: #eee; 
} 

table tr:hover td:first-child { 
    background-color: transparent; 
} 

table tr:hover { 
    background-color: yellow; 
} 

這些解決方案與通過Samich的優點是，這也將在哪裏工作父元素的背景不是純色，如。圖形，漸變等。