javascript - 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这是因为您的函数会在 each结束时触发并重新触发hover，所以每当您移动鼠标时，它都会触发两次。你想要做的是在mouseenterof.thumbs a和mouseleaveof上触发它.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();
    });
});