CODEWITHSUNDEEP
javascriptcss
Dan
Dan

Reputation: 377

CSS change entire row cell backgrounds when row is selected (hover)

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!!

enter image description here

Thanks guys.

Upvotes: 0

Views: 1613

Answers (2)

Aaron Digulla
Aaron Digulla

Reputation: 328584

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

Upvotes: 4

Andrea Ligios
Andrea Ligios

Reputation: 50203

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;
}

Upvotes: 4

Related Questions