jquery - 增加jquery悬停的目标区域

Question

在此页面上:

http://thegoodgirlsnyc.com/index.html?page=about

当用户将鼠标悬停在团队成员的姓名上时，会出现一个工具提示。不幸的是，如果用户没有直接看到文本，它就会闪烁。有没有办法将目标区域增加到文本周围更宽的区域，这样就不会出现闪烁？

Answer 1

将文本放入 div 中并为其添加填充。然后将 .hover 事件放在 div 上而不是文本上。

该问题是由.toolTipText引起的。 div 覆盖在悬停文本的一半位置。您可以通过所附的屏幕截图看到这一点。

我的解决方案是这样的。

<div class='hoverable'>
    <span>The text</span>
    <div class='tooltip' style='display:none;'>The tooltip crap</div>
</div>

并使用像这样的 jQuery

$(".hoverable").hover(function(){
    $(this).find("div.tooltip").show();
},function(){
    $(this).find("div.tooltip").hide();
});

然后设置其样式，使 .tooltip 相对于 .hoverable div 放置。