2

在本页面：

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

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

4

5 回答 5

5

将文本放在一个 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相对于.hoverablediv。

于 2011-07-11T15:58:36.163 回答
3

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

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

要解决此问题，请更改所有About Team Links的 javascript ：

从showToolTip('#lRG', '#dRG', 10, 'center');

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

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

于 2011-07-11T16:09:05.540 回答
0

这是 CSS 的一项工作，您需要将 adisplay: block;添加到元素中，以便添加widthand height。我的选择是 add padding，所以元素可以有不同的宽度和高度。但是您需要先显示块。

于 2011-07-11T16:04:18.023 回答
0

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

于 2011-07-11T16:00:00.393 回答
0

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

于 2011-07-11T15:58:44.697 回答