highlight table row

Question

I have following table structure

<table> 
 <tbody> 
  <tr> 
    <td>Lorem</td> <td>Ipsum</td> <td>Fierent</td> 
  </tr> 
  <tr> 
    <td>Lorem ipsum</td> <td>pro ut tale erant</td> <td>mnesarchum ne</td>
  </tr>
  <tr>
    <td >mnesarchum ne </td> <td >sapientem</td> <td >fierent mnesarchum </td> 
  </tr>
 </tbody>
</table>

Now, I want to highlight the row, on which mouse is hovering? So, I have 2 questions:

1. How can I achieve highlight row affect on above mentioned table structure?
2. How can I revert back the highlight effect, when row don't have move hovering over it?

I am using jQuery 1.4+, so please suggest me way to achieve the following using jQuery code.

I have create jsfiddle for the same: http://jsfiddle.net/c9h5w/

Thanks.

Answer 1

I'd add a classname to the row that is currently being hovered. You can then use CSS to style every table cell within this row with a certain background color, for example. Removing the styling is simply a matter of triggering a mouseout event and removing the classname.

CSS:

.hovered td {
    background: #ddd;
}

JavaScript:

$('table tr').mouseover(function() {
    $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});

Live example.