jquery - 子要素からの jQuery mouseleave

Question

私はテーブルを持っています。マウスオーバーすると、jQuery はいくつかの編集ボタンを追加します。テーブルからマウスを離すと、それらは消えます。問題は、マウスをテーブルに移動してからボタンの上に移動し、次に移動すると、それらが所定の位置にとどまることです。どうすればこれを修正できますか?

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