来自子元素的jQuery mouseleave

Question

这是故事：我有一张桌子。当你将鼠标悬停在它上面时，jQuery会添加一些编辑按钮。当你离开桌子时，它们就会消失。问题是，如果你将鼠标移动到桌子上，然后在按钮上移动，然后将它们移出，它们就会保留在原位。我该如何解决这个问题？

JsFiddle - ＆gt; http://jsfiddle.net/kthornbloom/LHZdd/1/

简化代码：

$(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

我没有为什么的答案，但mouseenter代替mouseover似乎有效：

http://jsfiddle.net/P3FMQ/

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