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

Question

I have a table which has a different colour when you hover over the row. This works perfectly but I also have CSS backgrounds in each cell on the row. The background image changes upon hover on each cell currently but as the row colour changes you cannot see the background image in each field unless you hover over the specific cell.

Can this be solved via CSS or can anyone provide a javascript line to change this.

In the image below you can see on the left I'm hovering over the second column and on the right the 4th column.

Basically i want to have all the ticks go white when hover over the row. I know you guys can help!!

Thanks guys.

Answer 1

Yes, you can with CSS. You should post your code btw...

Add the rule triggered by TR hovering, but acting on TD s.

Assuming you have a class "ok" on TD s with the black V mark, and a class "ko" on TD s with the X red mark:

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

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

Answer 2

Try to apply the Descendant Selector :

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

This will apply the style for any element with the class tick which is a child of a td that is itself a child of a tr with the mouse over it.

For this to work, you need to implement your ticks using background-image and not with img element (if you use img , the image will be on top of the background and the code above won't be visible).