css table tr:hover - выключить для определенных строк

751

06 февраля 2017, 17:06

Есть таблица на стилях, в стиле по умолчанию прописана подсветка строк tr:hover, все круто — удобно и работает, НО есть моменты, когда подсветка не нужна, что нужно прописать, чтобы отключить подсветку для определенных строк?

Answer 1

Вы не дали достаточно исходных данных, поэтому мой ответ очень общий:

Самый простой способ — пометить классом нужную строку. Допустим, мы назовем его nohover. Тогда нам нужно сделать селектор отменяющий действие tr:hover. Если, например, у подсветка прописана так:

.hovertable tr:hover {
  background: lightgray;
}

То нужно добавить класс .nohover:

.hovertable tr.nohover:hover {

а background выключить:

background: none;

Рабочий пример:

.hovertable tr:hover { 
  background: lightgray; 
} 
.hovertable tr.nohover:hover { 
  background: none; 
}

<table class="hovertable" width="100%"> 
   <tr> 
    <td>Обычная строка</td> 
  </tr> 
  <tr class="nohover"> 
    <td>Строка у которой убрана подсветка</td> 
  </tr> 
  <tr> 
    <td>Обычная строка</td> 
  </tr> 
</table>

Answer 2

используйте селектор nth-of-type (условие)