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 TDs.

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

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

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