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'处理程序之后，两个事件都开始无法控制地发射。

我知道与鼠标悬停/输出相关的冒泡问题，但这似乎表现相同。

任何人都知道为什么会这样？

编辑：

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

Answer 1

这是因为你的函数会激活并重新激活每个hover和每个hover的末尾，因此每次移动鼠标时它都会触发两次。您要执行的操作是在mouseenter .thumbs a和mouseleave .hover-box，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();
    });
});

jQuery mouseenter和mouseleave事件失控

1 个答案: