jQuery mouseenter mouseleave工具提示

我已经尝试了以下两种方法来显示每个div具有类名称头像带有隐藏的内容。jQuery mouseenter mouseleave工具提示

<div class="avatar"><a><img src="avatar.png" width="36" height="36"><div class="profile">Users Profile with Link</div></a></div>

第一个使用悬停和完美的作品时，我有页面上的多个虚拟形象元素。

不幸的是，工具提示内置了可点击的链接，悬停不允许我点击链接。

$('.avatar a').hover(function() { 
     $(this).contents('div:last-child').css({ 
      display : 'inline' 
     }); 
    }, function() { 
     $(this).contents('div:last-child').css({ 
      display : 'none' 
     }); 
    });

不幸的是，工具提示内置了一个可点击的链接，悬停不允许我点击链接。

我拼凑在一起的编码，我发现这里使用mouseenter和mouseleave。这一个也适用，它允许我点击链接。

var hover = null; 
    $('.avatar a').bind('mouseleave', function() { 
     var $this = $(this).contents('div:last-child'); 
     hover = setTimeout(function() { 
      $this.fadeOut(400); 
     }, 800); 
    }); 

    $('.avatar a').bind('mouseenter', function() { 
     $(this).contents('div:last-child').css({display:'block'}); 
     if (hover !== null) { 
      clearTimeout(hover); 
     } 
    });

不幸的是，如果您将鼠标放在这些头像中的多个头像上，只有最后一个头像被移除，而其他头像会一直保留。

我的问题是我如何使用第二个将fadeOut当我移动到另一个工具提示？

我错过了什么吗？还是完全做错了？

来源

2013-02-11 Tim

您可以创建一个jsfiddle的例子吗？ – Dom 2013-02-11 17:06:16

是的，我可以，就在这里。 http://jsfiddle.net/24MYq/ – Tim 2013-02-11 17:18:23

如果我理解正确，我认为你想要的是每个提示都有超时。您可以使用.data通过将超时与每个提示关联来实现此目的。

$('.avatar a').on('mouseleave', function() { 
    var $tip = $(this).contents('div:last-child'); 
    $tip.data('hover', setTimeout(function() { 
     $tip.fadeOut(400); 
     $tip.removeData('hover'); 
    }, 800)); 
}); 

$('.avatar a').on('mouseenter', function() { 
    var $tip = $(this).contents('div:last-child').show(); 
    var hover = $tip.data('hover'); 
    if (hover) { 
     clearTimeout(hover); 
     $tip.removeData('hover'); 
    } 
});

Live demo on jsfiddle

注：我也改变.bind()到.on()因为.bind()已被弃用，我改变了它使用.show()。

原始代码中发生的事情是，当您对第二个提示进行盘旋时，第一个提示的超时被清除，因为它们都共享相同的“悬停”变量。

编辑：在我匆忙中，我错误地清除了.data值。我应该一直在使用.removeData()。我已经修复了上面的代码。

Updated demo on jsfiddle

来源

2013-02-11 17:54:54

这和我在想的一样。工具提示显示在鼠标上方并保持打开状态。如果将鼠标放在其他人身上，他们会淡出，而活动的人总是保持活动状态。非常感谢约翰！ – Tim 2013-02-11 18:00:31

只需将其放入我的脚本和美丽！再次感谢。 – Tim 2013-02-11 18:04:29

还有一件事，我认为使用'$（'。avatar'）。children（'a'）'比'$（'。avatar a'）'更有效率，因为前者会找到所有具有“头像“班，然后得到孩子，而后者找到所有”a“标签，然后寻找班级。（选择器从右向左解析。） – 2013-02-11 18:07:27

问题是在你的超时功能..为什么你甚至使用它？ http://jsfiddle.net/24MYq/9/ 删除：

if (hover !== null) { 
    clearTimeout(hover); 
}

这不就是你需要什么，或者你需要的是延迟？如果你真的需要它，我会编辑我的文章，并给你一些工作上的延迟。

E：对于延迟或者更高的淡出（内部编号）或添加.delay（号码）之后，而数量是一个int值（500 - >半秒）

来源

2013-02-11 17:30:08 gulty

是的，只要鼠标保持在这个元素中，它就需要保持当前工具提示的激活状态。当我按照建议删除它时，它会淡出，并且这些元素具有包括链接的配置文件信息。 – Tim 2013-02-11 17:44:16

我看了一下你的jsFiddle示例;那完美的作品。让我根据你的例子改写我的东西。谢谢 – Tim 2013-02-11 17:49:37

如果你希望他们所有的被删除，当你鼠标移开，你可以通过改变 var $this = $(this).contents('div:last-child') 这样做 var $this = $('.profile');

所有的提示将在同一时间消失，超时会，只要你鼠标重置在另一个化身的形象，虽然。

来源

2013-02-11 17:30:18 Fedoranimus

这是通过保持所有活动，然后淡出。有没有自动淡化他们，只有一个活跃？ – Tim 2013-02-11 17:47:12

jQuery mouseenter mouseleave工具提示

回答

相关问题