Keep Table Row Highlighted on Border Mouseover

I'm using the following jQuery script to highlight a table row on mouseover.

input.find("tr").live('mouseover mouseout', function (event) {
    if (event.type == 'mouseover') {
        $(this).children("td").addClass("ui-state-hover-light");
    } else {
        $(this).children("td").removeClass("ui-state-hover-light");
    }
});    

My problem is that I have a 1px border on the table and when the mouse hits that border the highlighting of the row is lost until the mouse gets to the next t开发者_开发问答d. The result is a flicker as the mouse moves across the various cells in the row.

Is there a way to make it so the highlighting isn't lost when the mouse hits the border?

It looks like your state definition is off. Your code is defining an either or based upon its focus, but there is third state where no cell has the focus.

I'd a function that only got executed on mouseover. Let it find the hightlighted cell, similar to what you did, only by class, then change that cells class and then highlight the new cell. This way it only changes when something new is highlighted.

Good luck and HTH. -- Joe

Update: Example to come soon.

Following Mindfulgeek's advice the solution below solves the problem.

input.find("tbody tr").live('mouseenter', function (event) {
        // Remove highlighting from any other row
        $(this).siblings("tr.ui-state-hover-light").removeClass("ui-state-hover-light");

        // Highlight the row with focus
        $(this).addClass("ui-state-hover-light")                      
});     

input.find("tbody").bind('mouseleave', function() {
    // Remove highlighting from the last highlighted row
    var highlightedRow = $(this).find("tr.ui-state-hover-light");
    if(highlightedRow){
        highlightedRow.removeClass("ui-state-hover-light");
    }
});  

Try mouseenter and mouseleave instead of mouseover and mouseout

$("tbody tr").mouseenter(function (event) { $("td", $(this)).addClass("ui-state-hover-light"); });
$("tbody tr").mouseleave(function (event) { $("td", $(this)).removeClass("ui-state-hover-light"); });