我有以下情况:
.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/