我有以下情况:

.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/

有什么帮助吗?

最佳答案

这是一种解决方案,希望它能在您的结构中起作用,因为它取决于您对表格元素的样式。

inherit将不起作用,因为它是从没有背景的表继承而来的。相反,您可以设置tr并在悬停时更改td的颜色,以便它具有可继承的上下文。

请参见工作示例here on 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;
}

关于html - 如何将背景样式改回原始样式?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16898771/

10-12 12:53
查看更多