如何覆盖背景样式回到原来的

Question

我有以下情况:

.table_green {
background: #B4E391;
}
.data_table tbody tr:hover {
background-color: #fff;
cursor: pointer;
}
.unclickable_table tbody tr:hover {
background-color: inherit;
cursor: default;
}

现在的tr原来是绿色的，我想当一个表有class='data_table unclickable_table'设置，在悬停在一个tr有table_green类，background-color属性不会改变并保持绿色，但inherit似乎不工作

示例html:

<table class='data_table unclickable_table'>
<tbody>
<tr class='table_green'>
 <td>Untill it goes Click!</td>
</tr>
</tbody></table>

或者这个提琴:http://jsfiddle.net/nyDNc/1/

帮忙吗?

Answer 1

这是一个解决方案，希望一个将工作在你的结构，因为它取决于你如何样式你的表元素

inherit不能工作，因为它继承了没有背景的表。相反，你可以设置tr并改变td在悬停时的颜色，这样它就有了一个可以继承的上下文。

请参阅JSFiddle上的工作示例。

CSS是:

.table_green {
  background: #B4E391;
}
.data_table tbody tr:hover td {
  background-color: #fff;
  cursor: pointer;
}
.unclickable_table.data_table tbody tr:hover td {
  background-color: inherit;
  cursor: default;
}

Answer 2

为什么要添加第二个类来覆盖第一个类的效果呢?

Answer 3

我不太明白你的意思，但是

DEMO IS HERE:
http://jsfiddle.net/nyDNc/1/