CSS Hover禁用tr:hover

时间:2013-06-17 07:21:27

标签: css hover css-tables

我有一张表,我有一个tr:hover效果的全局css代码。但有时我不想在我的桌子上使用这种悬停效果。请查看代码并告诉我如何在此表上不起作用。 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; }

2 个答案:

答案 0 :(得分:4)

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

如需更多“官方”阅读,请参阅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; }

答案 1 :(得分:0)

以下代码用于悬停启用

a:hover {

    background-color: yellow;

}

以下代码用于悬停禁用

a:nohover {

    background-color: yellow;

}

此致

Satish M Hiremath