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 相关的冒泡问题，但这似乎表现相同。

有人知道为什么会这样吗？

编辑：

这是关于小提琴的交易。不是最漂亮的景象，但功能与我的问题相同。 FIDDLE

Answer 1

这是因为您的函数会在每个hover 以及每个hover 的末尾触发和重新触发，所以每当您移动鼠标时，它都会触发两次。你想要做的就是在.thumbs a 的mouseenter 和.hover-box 的mouseleave 上开火，like this

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