Using CSS, how can I change the background color of a table row depending on the cell I hover over?

Question

I have the following code on my web-page. It iterates a list, creates new cells, and assigns a css class to a new table cell based on a criterion (assume class .raw is assigned to some cells):

<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
     <g:each in="${params.classProperties}" status="cnt" var="classProperty">
          <td class="${classProperty.name.contains('raw')?'raw':'normal'}">${fieldValue(bean: billTemplateInstance, field: classProperty.name)}</td>
     </g:each>
</tr>

If a cell has been assigned the .raw class, I set the background color for the cell. Now, I wanted to change the entire background color of a row on hover. I tried adding the following lines to my css file...

.list td.raw {
    background: #CCFFBF;
}

.list th:hover, .list tr:hover {
    background: #b2d1ff;
}

Unfortunately, on hover, the background color of the cells with class .raw remains as it was defined in ".list td.raw". Only cells which have not been assigned a class change color on hover:

Appreciate all help and suggestions. :)

Answer 1

Try adding another selector to the chain:

.list th:hover, .list tr:hover { becomes
.list th:hover, .list tr:hover, .list tr:hover td.raw {