CODEWITHSUNDEEP
jquerymouseovermouseleave
kthornbloom
kthornbloom

Reputation: 3730

jQuery mouseleave from child elements

Here's the dealio: I have a table. When you mouse over it, jQuery adds some editing buttons. When you mouse out of the table, they go away. The problem is that if you move the mouse into the table, then over the button, and THEN out, they stay in place. How can I fix this?

JsFiddle -> http://jsfiddle.net/kthornbloom/LHZdd/1/

Simplified code:

$(document.body).on("mouseover", ".edit table", function (e) {
    $('.jr-columnmodifier, .jr-rowmodifier').remove();
    $('<div class="button"></div>').appendTo(this);
});

$(document.body).on("mouseleave", ".edit table, .button", function (e) {
    $('.button').remove();
});

Upvotes: 3

Views: 329

Answers (1)

Jason P
Jason P

Reputation: 27022

I don't have an answer for why, but mouseenter instead of mouseover seems to work:

http://jsfiddle.net/P3FMQ/

$(document.body).on("mouseenter", ".edit table", function (e) {

Upvotes: 4

Related Questions