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 .

Answer 2

Check-it Out:

$("table tr").hover(
            function(){
                $(this).css("background-color","#FFEFC6");
              //$(this).addClass('className'); //if ur working with class 
            },
            function(){
                $(this).css("background-color","");
              //$(this).removeClass('className'); //if ur working with class 
            }
        );

CLICK HERE TO SEE THE DEMO