Question

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 td. 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?

Answer 1

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.