CSS Change Color of all TD background during Hover on row

Question

I have a table where all cells in each rows are colored blue. What I want to achieve is when cursor hovers over a row, all cells in that row changes color to yellow.

I already know how to use CSS to change the color of the entire row on hover and I already know how to use CSS to change the color of a single cell when hovered.

What I want is a little different, I want each cells to change it's background color to yellow during hover, NOT the row bg color. The reason being is that the left-most cells and the right-most cells of each rows have rounded corners. If I use BG color of the entire row on hover, there is a visible sharp corners as does not have a round corner property, there may be ways to do that but right now what I'm just trying to achieve (struggling) is just to change the BG color of all cells during mouse hover and not the color of the row and not the color of just 1 cell. Can this be achieved?

Answer 1

I'm assuming you want to change the color of the cell and only the cell. If you want to change the color of it based on its text, use the contains() jQuery selector :

CSS :

.greenBg {
background: green;
}

jQuery :

$("td:contains('Exceeds')").addClass('greenBg');

Answer 2

I think this CSS will help you.

tr:hover td {
   background-color: yellow;
}