CODEWITHSUNDEEP
jqueryhtmlhtml-tablehighlighting
Nick Olsen
Nick Olsen

Reputation: 6369

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

Upvotes: 0

Views: 1146

Answers (4)

Jonathan Moffatt
Jonathan Moffatt

Reputation: 13457

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

Upvotes: 0

Nick Olsen
Nick Olsen

Reputation: 6369

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

Upvotes: 1

Mindfulgeek
Mindfulgeek

Reputation: 141

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.

Upvotes: 2

check123
check123

Reputation: 2009

Try mouseenter and mouseleave instead of mouseover and mouseout

Upvotes: 0

Related Questions