CSS Hover disable on tr: hover

Question

У меня есть таблица, и у меня есть глобальный код css для эффекта tr: hover. Но иногда я не хочу использовать этот эффект зависания на моих таблицах. Посмотрите на код и скажите мне, как я не могу повлиять на эту таблицу. JSFIDDLE. Здесь есть css id. Это имя - таблица продуктов. Я не понимаю этот css. Правило ИТ.

#product-table > tbody > tr { cursor:pointer; } 
#product-table > tbody > tr:hover { background:#eee; } 

.nohover > tbody > tr { cursor:default !important; } 
.nohover > tbody > tr:hover { background:inherit !important; } 

.green_bg { background-color:#090; } 

Answer 1

Ваша проблема является Специфичность вашего CSS кода - here's a good read about it.

ссылающийся на элемент по его id (используя #), всегда будет переопределять любой стиль, заданный путем обращения к нему с его классом (используя.).

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

В вашем случае вы должны добавить id в селектор .nohover, чтобы переопределить предыдущий стиль.

#product-table > tbody > tr { cursor:pointer; } 
#product-table > tbody > tr:hover { background:#eee; } 

#product-table.nohover > tbody > tr { cursor:default !important; } 
#product-table.nohover > tbody > tr:hover { background:#fff !important; } 

Это аннулирует предыдущее определение, поскольку он имеет идентификатор в нем, и класс, который один уровень выше, просто назвав его по идентификатору.

Для более «официальный» читать, обратитесь к w3.org's specification

EDIT:

Если я правильно понял, вы хотите, чтобы отключить все парит на столе, который имеет класс .nohover.

Это можно сделать, применяя стили наведения только на таблицах, которые не имеют исключающего класса. как так:

#product-table:not(.nohover) > tbody > tr { cursor:pointer; } 
#product-table:not(.nohover) > tbody > tr:hover { background:#eee; } 

.green_bg { background-color:#090; } 

Answer 2

код ниже Hover Включить

a:hover { 

    background-color: yellow; 

} 

---

код ниже для Hover Отключить

a:nohover { 

    background-color: yellow; 

} 

С уважением,

Сатиш M Hiremath