Question

Given the following html table and script shown below I am having a problem where the mouse leave event appears to fire right after the mouse enter, even if I don’t move the mouse out of the row.

<script type="text/javascript" language="javascript">
    function highlightRows(iMainID) 
    {
        $('tr[mainid=' + iMainID+ ']').each(function() {
            if ($(this).attr('old') == undefined) {
                $(this).attr('old', $(this).css('backgroundColor'));
            }
            $(this).animate({ backgroundColor: "#FFFFCC" }, 500);
            $(this).mouseout(function() {
                if ($(this).attr('old') != undefined) {
                    $(this).animate({ backgroundColor: $(this).attr('old') }, 500);
                }
            });
        });        
    }
</script>
<table>
    <tr> 
      <td mainid="1" onmouseover='highlightRows(1)'><div>text</div></td>
      <td mainid="1" onmouseover='highlightRows(1)'><div>text</div></td>      
      <td mainid="2" onmouseover='highlightRows(2)'><div>text</div></td>
    </tr>
<table>

Answer 1

As Pointy and Jer both indicated, you should choose one model (JQuery) or the other (onWhatever in HTML), don’t mix them.

Most likely, your double-entry has to do with the fact that you’re subscribing multiple times to the same event. (If you do mouseover twice, you get two mouseout event handlers that will both be called.)

Also, watch out for the duplicate “mainid” values. That looks like a problem, and may be the cause of your issue.