选择行时CSS更改整个行单元格背景（悬停）答案

【问题标题】：CSS change entire row cell backgrounds when row is selected (hover)选择行时CSS更改整个行单元格背景（悬停）
【发布时间】：2015-02-13 17:43:55
【问题描述】：

当您将鼠标悬停在该行上时，我有一个具有不同颜色的表格。这工作得很好，但我在行的每个单元格中也有 CSS 背景。当前将鼠标悬停在每个单元格上时背景图像会发生变化，但随着行颜色的变化，除非将鼠标悬停在特定单元格上，否则您无法在每个字段中看到背景图像。

这可以通过 CSS 解决吗，或者任何人都可以提供一个 javascript 行来更改它。

在下图中，您可以在左侧看到我将鼠标悬停在第二列上，而在右侧则在第四列上。

基本上，当将鼠标悬停在行上时，我希望所有的刻度都变白。我知道你们可以帮忙！！

谢谢大家。

【问题讨论】：

【解决方案1】：

是的，您可以使用 CSS。您应该顺便发布您的代码...

添加由TR 悬停触发但作用于TDs 的规则。

假设您在TDs 上有一个带有黑色V 标记的class "ok"，在TDs 上有一个带有X 红色标记的class "ko"：

tr:hover td.ok {
  color: white;
  background-color: black;
}

tr:hover td.ko {
  color: red;
  background-color: black;
}

【讨论】：

【解决方案2】：

尝试申请Descendant Selector:

tr:hover td .tick { background-image: url('white-tick.png') }

这将为任何具有 tick 类的元素应用样式，该类是 td 的子元素，而 td 本身是 tr 的子元素，鼠标悬停在它上面。

为此，您需要使用background-image 而不是img 元素来实现您的刻度（如果您使用img，图像将位于背景之上，并且上面的代码不会可见）。

【讨论】：

+1。但是' '是Descendant Selector，而'>'是Child Selector：w3.org/TR/CSS2/selector.html#descendant-selectors（不一定是child，但可以是child的child的child...）跨度>
@AndreaLigios：感谢您的链接，我改进了答案。