0

我有一张桌子，我有一个用于 tr:hover 效果的全局 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; }
4

2 回答 2

4

你的问题是你的 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 调用它高 1 级。

有关更“官方”的阅读，请参阅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; }
于 2013-06-17T07:26:38.807 回答
-1

下面的代码用于悬停启用

a:hover {

    background-color: yellow;

}

下面的代码用于禁用悬停

a:nohover {

    background-color: yellow;

}

问候，

Satish M Hiremath

于 2016-06-16T09:14:44.003 回答