CSS Hover在tr上禁用:悬停

Question

我有一个表，我有一个用于tr:悬浮效果的全局css代码。但有时我不想在我的桌子上使用这种悬停效果。请看代码，告诉我如何在这张表上不运行效果。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代码的细节- 这是一本很好的读物。

引用元素的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规范

编辑：

如果我理解正确，那么您希望禁用在具有类.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·希里数学