加大对jQuery的悬停

目标区域在此页面：加大对jQuery的悬停

当在团队成员的名字用户滚过，工具提示出现。不幸的是，如果用户不是直接在文本上闪烁。有什么方法可以将目标区域扩大到文字周围的更广泛区域，以避免闪烁？

2011-07-11 MLS1984

假设是你的网页链接到您，我不会把额外的标记，如的div因为文本已经包含在自己的跨越。相反，只需向每个span添加填充即可。更多的语义，然后带来额外的元素造型，而不需要改变你的悬停事件。

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

要解决这种变化的JavaScript的所有关于团队链接：

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

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

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

2011-07-11 16:09:05 tw16

由于某些原因，这仍然不起作用。我已经应用了10px的填充到“aboutName”范围，但它仍然闪烁。如果用户徘徊在给定名称的左侧，而不是右侧，则闪烁正在发生，所以我只是向左填充。仍然nadad – MLS1984

我注意到了。看来你已经把你的悬停设置得很奇怪。但是你的脚本被缩小了，所以我看不出你是怎么称呼悬停的。 – tw16

我正在关闭另一个开发人员的代码，我只是用未压缩的版本替换缩小的代码。 – MLS1984

将文本放在div中并给它填充。然后将.hover事件放在div上而不是文本上。

问题是由.toolTipText造成的致命事件。 div被覆盖在正在被徘徊的文本的中间。你可以通过附加的截图看到这一点。 enter image description here

我的解决方案是这样的。

<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股利。

2011-07-11 15:58:36 dotty

我来这里说这个。到底我会做什么。简单，语义。 –

@andy_vulhop其实我觉得这不像它可能的那么简单或者语义化。如果您在下面看到我的答案，您将看到不需要额外的标记，也不需要更改悬停状态。 – tw16

@dotty，对不起，我试图添加一个div，并应用填充以及“aboutName”类，但我似乎无法得到它的工作。 – MLS1984

你可以有一些延迟，然后你显示工具提示或给锚定一些基本上会增加悬停面积的填充。

2011-07-11 15:58:44 ShankarSangoli

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

2011-07-11 16:00:00

元素应用于div，所以我不确定如何以更大的尺寸设置不同的悬停。 – MLS1984

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

2011-07-11 16:04:18 ramono

回答