Javascript 如何删除鼠标上的下一个附加？

我的代码有问题；当I

mouseenter

元素时，会将工具栏附加到此元素，但当I

mouseleave

从工具栏附加到元素时，会再次附加工具栏。如何防止此重新追加

$('.el').on('mouseenter', function(e){

  var toolbar = $('<div class="toolbar"><span>leave toolbar to element</span></div>');  

    setTimeout(function(){
        toolbar.addClass('widget-over');
    },100);

    $('body').prepend(toolbar);

    toolbar.css({
        left:$('.el').offset().left,
        top:$('.el').offset().top - toolbar.height() - 20
    });

    $('.el').on('mouseleave',function(e){
        if ($(e.relatedTarget).closest(toolbar).length) return;
        toolbar.removeClass('widget-over');
        toolbar.remove();
    });

    toolbar.on('mouseleave',function(e){
        toolbar.remove();
    });
});

$（'.el'）。在（'mouseenter'，函数（e）上{
var toolbar=$（'leave toolbar to element'）；
setTimeout（函数（）{
toolbar.addClass（'widget-over'）；
},100);
$（'body'）.prepend（工具栏）；
toolbar.css({
左：$（'.el'）.offset（）.left，
顶部：$（'.el'）.offset（）.top-toolbar.height（）-20
});
$（'.el'）。on（'mouseleave'，函数（e）{
if（$（e.relatedTarget）.closest（toolbar.length）返回；
toolbar.removeClass（'widget-over'）；
toolbar.remove（）；
});
工具栏.on（'mouseleave'，函数（e）{
toolbar.remove（）；
});
});

非常感谢社区的解答！没错，而且

问题小提琴->

解决方案小提琴->

---

问题是每次出现

鼠标悬停

时，您都在创建事件处理程序。我已经将它们拆分以使其更简单，这似乎已经修复了您的错误：

var toolbar = $('<div class="toolbar"><span>leave toolbar to element</span></div>');  
toolbar.on('mouseleave',function(e){
    toolbar.remove();
});    

var enter = function(e) {

    setTimeout(function(){
        toolbar.addClass('widget-over');
    },100);

    $('body').prepend(toolbar);

    toolbar.css({
        left: $el.offset().left,
        top: $el.offset().top - toolbar.height() - 20
    });    
};

var leave = function(e){
    if ($(e.relatedTarget).closest(toolbar).length) return;
    toolbar.removeClass('widget-over');
    toolbar.remove();
}

var $el = $('.el')
    .on('mouseenter', enter)
    .on('mouseleave', leave);

var-toolbar=$（“将工具栏留给元素”）；
工具栏.on（'mouseleave'，函数（e）{
toolbar.remove（）；
});    
var enter=函数（e）{
setTimeout（函数（）{
toolbar.addClass（'widget-over'）；
},100);
$（'body'）.prepend（工具栏）；
toolbar.css({
左：$el.offset（）.left，
顶部：$el.offset（）.top-toolbar.height（）-20
});    
};
变量离开=函数（e）{
if（$（e.relatedTarget）.closest（toolbar.length）返回；
toolbar.removeClass（'widget-over'）；
toolbar.remove（）；
}
变量$el=$（'.el'）
.on（'mouseenter'，enter）
.在（'mouseleave'，离开）；

---

jsFIDLE:

@codeMan尝试将工具栏鼠标移动到“文本”，您将看到工具栏再次添加动画，不要理解如何删除。我在Firefox 35.0.1上，它按预期工作。@Anton是的，它工作正常，但我想在

mouseleave

工具栏到元素时删除“re”追加，请尝试，你会看到动画再次播放。哈哈，对不起，粘贴错误：）这是正确的，还可以尝试使用Qtip之类的插件：现在可以了，非常感谢，但是现在（用你的代码）如果我将鼠标从一个工具栏移到另一个工具栏，工具栏不会移除，更新了fiddle: