Question

我正在尝试使用CSS和：悬停来更改整个tbody的背景颜色。如果已经设置了背景，我无法更改悬停背景。我根本不能。我甚至试过！impotant ，但没有运气。

<table border="1">
    <tbody>
    <tr>
        <th>Testing</th>
        <td>Some stuff</td>
    </tr>
    <tr>
        <th>Testing</th>
        <td>Second more stuff</td>
    </tr>
    </tbody>
</table>

我的CSS

th {
    background: red;
}
tbody:hover {
    background: blue !important;
}

http://jsfiddle.net/W4cJh/1/

如您所见，如果尚未设置背景，则悬停可以正常工作。从th-tag中删除 background：red ，看它是否在没有预设颜色的情况下工作。

Answer 1

这将为您完成工作，无需!important：

th {
    background: red;
}
tbody:hover,
tbody:hover th {
    background: blue;
}

演示： http://jsfiddle.net/W4cJh/4/

Answer 2

那是因为TH是表格的子项，因此技术上也是如此。通过将TABLE背景设置为蓝色，它不会覆盖TH背景。

要解决此问题，请添加以下内容：

tbody:hover th {
  background: blue;
}

（你可以跳过!important s。这些都是不好的做法。）

Example fiddle is here.

在具有预设背景颜色的表中悬停时更改背景颜色

2 个答案: