Почему CSS-наведение не работает над строками таблицы, когда ячейки внутри строк имеют имена классов?

Я застрял в этой проблеме, поэтому любая помощь будет оценена. У меня есть таблица с несколькими строками. Каждая ячейка внутри строки принадлежит определенному классу. Я использую эти имена классов для окраски ячеек.

Вот одна строка примера из моей таблицы:

<tr>
     <td class = "summarypage-odd-column">Theme</td>    <td class = "summarypage-odd-column">Q2 2009</td>   <td class = "summarypage-odd-column">Q1 2009</td>
     <td class = "summarypage-even-column">Theme</td>   <td class = "summarypage-even-column">Q2 2009</td>  <td class = "summarypage-even-column">Q1 2009</td>
     <td class = "summarypage-odd-column">Business Area</td>    <td class = "summarypage-odd-column">Q1 2009</td>   <td class = "summarypage-odd-column">Q1 2008</td>
 </tr>

Я хотел бы выделить каждую строку, когда пользователь перемещает указатель мыши над любой ячейкой в этой строке. Поэтому для этого я использовал следующий CSS-код.

tr:hover {
  background-color: #FFFAF0; color: #000;
}

К сожалению, похоже, что каждая ячейка данных таблицы имеет имя класса, зависание не работает. Но если я удалю имена классов из ячеек данных, зависает.

Мой вопрос в том, есть ли способ, которым я могу заставить объект зависания работать для строки таблицы, но все еще имея имена классов для ячеек таблицы данных внутри строки.

Ответ 1

Попробуйте следующее:

tr:hover td {
  background-color: #FFFAF0; color: #000;
}

Поместите это после того, как существующие объявления стиля td будут безопасными

Ответ 2

Это не происходит для меня. Убедитесь, что вы только добавляете/удаляете имена классов, проверяя, имеют ли они влияние, и убедитесь, что td не имеют собственного фона, покрывающего область tr.

Ответ 3

Вероятно, вам нужно использовать важный символ, чтобы убедиться, что ваш стиль зависания переопределяет определенный в нем класс:

tr:hover { 
    background-color: #FFFFAF0 !important;
    color: #000 !important; 
}

Интересно, что это не будет работать для IE6, потому что этот браузер применяет только привязку к тегам.

Ответ 4

Инструкции CSS в имени класса имеют приоритет над инструкциями <tr>.

Чтобы исправить это, используйте td.summarypage-odd-column: hover, td.summarypage-even-column: наведите курсор внутри вашего CSS.

Примечание. Если вы используете IE6, то: зависание работает только с ссылками, т.е. a: hover.

Ответ 5

Я думаю, что фоновый цвет td перезаписывает tr background-color. Решение, данное @Nick Craver, является хорошим.
Вы должны изменить цвет фона ячейки, а не цвет фона строки.

tr:hover td {
   ...
}

Ответ 6

никогда не помещайте пробел между

tr:hover(space)td

Я давал пространство, поэтому он работал у меня.