jQuery mouseleave from child elements

Question

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

Answer 1

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) {