Correction of the mouseout and mouse over in relation to table

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;
}

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.

you can use jquery hover

$("table tr").hover(
function(){ //handles the mouseenter
    $(this).removeClass('row_overr');
    $(this).addClass('row_over');
},
 function(){ //handles the mouseleave                  
     $(this).addClass('row_overr');
     $(this).removeClass('row_over');

});

FIDDLE

Update

as Brock Adams mentioned it can be simplified by taking advantage of jquery chaining

$("table tr").hover(function(){
$(this).removeClass('row_overr').addClass('row_over');
},
function(){           
$(this).addClass('row_overr').removeClass('row_over');

});

FIDDLE

Try this

$(document).ready(function(){

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


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


});






.row_over
{
    background: #AA1133;
}

.row_overr
{
    background: #FFFFFF !important;
}