增加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。

Answer 2

假设这是您链接到的网页，我不会添加额外的标记，例如 divs ，因为文本已经包含在他们自己的 spans 中。只需为每个span添加填充。更多的语义然后为样式带来额外的元素，而不需要改变你的悬停事件。

编辑：主要问题是您的工具提示已设置为显示在中心而不是像您之前的跨度中那样显示在右侧。这导致工具提示div切断了一半的文本。

要解决此更改所有关于团队链接的javascript：

来自showToolTip('#lRG', '#dRG', 10, 'center');

到showToolTip('#lRG', '#dRG', 10, 'right');

这将导致工具提示显示在名称的末尾而不是中间，因此停止工具提示div将文本切成两半。

Answer 3

在显示工具提示或给锚点添加一些填充之前，您可能会有一些延迟，这将基本上增加悬停区域。

Answer 4

您可以增加元素的宽度/高度，也可以将它们包装在更大的单独元素中，然后在这些包装器上设置hover事件。我会建议后者。

Answer 5

这是CSS的工作，您需要为元素添加display: block;，以便添加width和height。我的选择是添加padding，因此元素可以有不同的宽度和高度。但是你需要先显示块。