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

Question

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

这可以通过CSS解决，还是任何人都可以提供一个javascript行来改变它。

在下面的图片中，您可以看到左侧我悬停在第二列上，右侧是第4列。

基本上我希望将鼠标悬停在该行上时所有刻度都变为白色。我知道你们可以帮忙!!

谢谢你们。

Answer 1

是的，你可以使用CSS。你应该发布你的代码btw ...

添加由TR悬停触发的规则，但代理TD s。

假设class "ok"上的TD带有黑色V标记，而class "ko"上的TD带有X红色标记：

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

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

Answer 2

尝试应用Descendant Selector：

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

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

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