Change table row color on hover (jQuery or CSS)

Question

My problems is that I already got some 'highlighted' (meaning that they've got their own background color to highlight them) cells in my table that won't change their background color when I use code to change color of entire row when mouse is hoovering over them.

Hoovering over a row only changes background color of cells that aren't highlighted.

How do I fix this so entire row changes background color?

I've got this HTML table:

 $(window).load(function() { $('#infotable tr').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); }); 

 #infotable td { padding:0.7em; border:#969696 1px solid; } .highlight { background:#DAFFD6; } .hover { background:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <table> <thead> <tr> <th></th> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody id="infotable"> <tr> <td>Row #1</td> <td>889 kg</td> <td class="highlight">151 kg</td> <td>192 kg</td> </tr> <tr> <td>Row #2</td> <td>784 kg</td> <td>15 kg</td> <td class="highlight">64 kg</td> </tr> </tbody> </table> 

Answer 1

You can achieve this in CSS alone. You just need to make the :hover rule more specific than the td.highlight . Try this:

#infotable tr:hover td,
#infotable tr:hover td.highlight
{
    background:yellow;
}

Example fiddle

Answer 2

Add class hover to all td insted of tr by changing javascript only.

  $('#infotable tr').hover(function()
  {
    $(this).find('td').addClass('hover');
  }, function()
  {
    $(this).find('td').removeClass('hover');
  });

FIDDLE

Answer 3

Just inherit the style from hover check this Fiddle

.hover, .hover .highlight
{
    background:yellow;
}

Answer 4

try this in css

#infotable tr td:hover
{
    background:yellow;
}