Переопределить TD: первый ребенок с TR: hover? - PullRequest
Новая
       21

Переопределить TD: первый ребенок с TR: hover?

2 голосов
/ 22 сентября 2011

У меня есть таблица, где первые ячейки имеют другой фон. Когда применяется TR: hover, эти ячейки не изменяются.

Есть ли способ переопределить их при наведении строки? 

#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; 
}

Ответы [ 2 ]

8 голосов
/ 22 сентября 2011

попробуй 

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

Да, все работает.

Код: http://jsfiddle.net/b9ndZ/1/

4 голосов
/ 22 сентября 2011

Проблема в том, что элементы td вложены в элемент tr, что означает, что фон td будет "выше" фона tr.

Чтобы td s "потерял" свой фон, у вас есть как минимум два варианта:

Один : http://jsfiddle.net/mqchen/WXvkk/
Используя псевдоселектор :not(), вы можете установить фон td только тогда, когда пользователь не наводит указатель мыши на 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 заключается в том, что это также будет работать, когда фон родительского элемента не является сплошным цветом, например. графика, градиент и т. д.

...