Question

Goal:
The row should have a different background color if the mouse’s icon is inside of table’s rows. When the icone is outside of the row, the background of the row should be turned back into default.

Problem:
I can’t make the sourcode in jQuery to be working properly.

I would like to use jQuery only.

Fiddle

---

    <TABLE id="dataTable" width="350px" border="1">
        <TR class="row_overr">
            <TD>4</TD>
            <TD>1</TD>
            <TD>22</TD>
            <TD></TD>            
        </TR>
         <TR class="row_overr">
            <TD>4</TD>
            <TD>1</TD>
            <TD>22</TD>
            <TD></TD>            
        </TR>       
         <TR>
            <TD>4</TD>
            <TD>1</TD>
            <TD>22</TD>
            <TD></TD>            
        </TR>       
    </TABLE>




$(document).ready(function(){

    /*
    $('tr').live('mouseover', function() {
  $(this).addClass('row_over');
});


        $('tr').live('mouseout', function() {
  $(this).addClass('row_overr');
});

    */




    $('tr').mouseover(function()
    {
        $(this).addClass('row_over');
    });


        $('tr').mouseout(function()
    {
        $(this).addClass('row_overr');
    });


});






.row_over
{
    background: #AA1133;
}

.row_overr
{
    background: #FFFFFF;
}

Answer 1

You don’t need jQuery/javascript for this at all.

Plain old CSS works in all modern browsers:

#dataTable tr:hover {
    background: #AA1133;
}

See the fiddle.