jQuery mouseenter和mouseleave事件失控

Question

我正在使用這段代碼用懸浮元素的內容填充div。

$('.gallery .thumbs a').hover(
  function(){
    var target = $(this);
    $('.hover-box').html(target.clone());
    var top = target.offset().top;
    var left = target.offset().left;
    $('.hover-box').css({'display':'block', 'top':top, 'left':left}); 
  },
  function(){
    $('.hover-box').hide();
  }
);

問題是-許多人似乎已經擁有了-在添加了'mouseleave'處理程序之后，這兩個事件開始無法控制地觸發。

我知道與mouseover / out相關的冒泡問題，但這似乎是相同的。

有人知道為什么會這樣嗎？

編輯：

這是擺弄的事情。 不是最漂亮的景象，但功能與我的問題相同。 小提琴

Answer 1

這是因為您的函數會在每次hover以及在每次hover結束時觸發並重新觸發，因此每當您移動鼠標時，它都會觸發兩次。 你想要做的，而不是什么是火它mouseenter的.thumbs a和mouseleave的.hover-box ， 這樣

jQuery(function () {
    jQuery('.thumbs a').hover(

    function () {
        var target = $(this);
        jQuery('.hover-box').html(target.clone());
        var top = target.offset().top;
        var left = target.offset().left;
        jQuery('.hover-box').css({
            'display': 'block',
            'top': top,
            'left': left
        });
    });
    $('.hover-box').mouseleave(function() {
        $('.hover-box').hide();
    });
});