Clever Geek Handbook

Change table row color on hover (jQuery or CSS)

My problems are that I already have some "highlighted" ones (which means they have their own background color to highlight them) in my table that will not change their background color when I use the code to change the color of everything. when the mouse hovers over them.

When you move along a line, only the background color of cells that are not selected changes.

How do I fix this so that the whole line changes the background color?

I have 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>
Run codeHide result


+3


source to share


4 answers


You can only achieve this in CSS. You just need to make the rule :hover

more specific than td.highlight

. Try the following:

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


Sample script

+6


source


Add hover class to all td

insted from tr

, changing only javascript.

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


FIDDLE

+1


source


Just inherit style from hover, check this Fiddle

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


source


try this in css

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


source






More articles:


All Articles