CSS Hover 在 tr :hover 上禁用

Question

我有一张 table ，我有一个用于 tr:hover 效果的全局 css 代码。但有时我不想在我的 table 上使用这种悬停效果。请查看代码并告诉我如何不对该表运行效果。 JSFIDDLE .这里有一个 css id。它的名字是产品表。我不清除这个CSS。 IT 的规则。

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

这将覆盖之前的定义，因为它有一个 id 和一个类，比仅通过 id 调用它高一级。

有关更“官方”的阅读，请参阅 w3.org's specification

编辑:

如果我没理解错的话，您想禁用所有悬停在具有类 .nohover 的表上。

这可以通过仅在没有排除类的表格上应用悬停样式来完成。像这样:

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

.green_bg { background-color:#090; }