Почему при наведении курсора CSS на строки таблицы не работают имена классов?

Question

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

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

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

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

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

Answer 1

Попробуйте это:

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

Поместите это после существующих td объявлений стиля, чтобы быть безопасными

Answer 2

никогда не ставьте пробел между

tr:hover(space)td

Я давал место, значит, оно работало на меня.

Answer 3

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

tr:hover td {
   ...
}

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

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