Correction of the mouseout and mouse over in relation to table
<p>Goal:<br>
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.</p>

<p>Problem:<br>
I can't make the sourcode in jQuery to be working properly.</p>

<p>I would like to use jQuery only.</p>

<p><a href="http://jsfiddle.net/uCFQ4/6/" rel="nofollow">Fiddle</a></p>

<hr>

<pre><code>    &lt;TABLE id="dataTable" width="350px" border="1"&gt;
        &lt;TR class="row_overr"&gt;
            &lt;TD&gt;4&lt;/TD&gt;
            &lt;TD&gt;1&lt;/TD&gt;
            &lt;TD&gt;22&lt;/TD&gt;
            &lt;TD&gt;&lt;/TD&gt;            
        &lt;/TR&gt;
         &lt;TR class="row_overr"&gt;
            &lt;TD&gt;4&lt;/TD&gt;
            &lt;TD&gt;1&lt;/TD&gt;
            &lt;TD&gt;22&lt;/TD&gt;
            &lt;TD&gt;&lt;/TD&gt;            
        &lt;/TR&gt;       
         &lt;TR&gt;
            &lt;TD&gt;4&lt;/TD&gt;
            &lt;TD&gt;1&lt;/TD&gt;
            &lt;TD&gt;22&lt;/TD&gt;
            &lt;TD&gt;&lt;/TD&gt;            
        &lt;/TR&gt;       
    &lt;/TABLE&gt;




$(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;
}
</code></pre>
