Override TD:first-child with TR:hover?

I have a table where the first cells have a different background. When the TR:hover is applied those cells do not change.

Is there a way to override them when the row is hovered?

#spreadsheet TABLE, #spreadsheet TH, #spreadsheet TD { 
  border:1px开发者_StackOverflow中文版 solid #CCC;
}

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

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

try

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

Yep, it works.

Code: http://jsfiddle.net/b9ndZ/1/

The problem is that the td elements are nested in the tr element, which means that td's background will be "above" the tr's background.

To let the tds "loose" their background you have at least two options:

One: http://jsfiddle.net/mqchen/WXvkk/
Using the :not() pseudo selector you can set the td's background only when the user isn't hovering over the tr. Downside with this is that :not() only works in some browsers (IE) if you use e.g. http://selectivizr.com/

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

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

Two: http://jsfiddle.net/mqchen/zPGW9/
Set the td's background color to be transparent when it's parent tr is hovered over.

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

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

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

The advantage of these solutions vs. that by Samich is that this will also work where the parent element's background not a solid color, eg. a graphic, gradient, etc.