尝试使用 show() 和 hide() 时出现闪烁效果答案

【问题标题】：flickering effect happening when trying to use show() and hide()尝试使用 show() 和 hide() 时出现闪烁效果
【发布时间】：2011-11-11 17:42:12
【问题描述】：

我正在尝试为正在构建的网页创建工具提示功能。我有一个元素表，其中一列包含简短描述。我正在尝试创建一种效果，用户将鼠标悬停在简短描述上，并从隐藏的 div 标签显示完整描述。

悬停效果有效，但是如果我向下移动到原始 div 标记之外的下一行，jquery 会进入混乱状态并闪烁，并且不允许我将鼠标悬停在查看下面行的描述。

如果我将鼠标向上移动，它会正常工作。

我的 jquery 函数看起来像

$('.alarms-desc').live('mouseover mouseout', function (event) {
var target = $(this).find(".tooltip");
if (event.type == "mouseout") {
    target.hide("fast");
}
if (event.type == "mouseover") {
    target.show("fast");
}

});

我的 CSS 看起来像

.tooltip {
display:none;
margin:0 10px 1em 0;
padding:8px;
background:#fcfcfc;
border:1px solid #e1e1e1;
line-height:130%;
background-color: #DCDCDC;
border: solid 1px #DCDCDC;
border-radius: 4px;
-moz-border-radius: 4px;
max-width: 500px;
position: absolute;
}

.alarms-desc
{
display: block;
}

一些html

<div id="AD_40ba5b52-8a8e-40cf-99e3-fbb9cbea8863" class="alarms-desc">

My short descrip 1
<div id="tool_40ba5b52-8a8e-40cf-99e3-fbb9cbea8863" class="tooltip">This is my long    description that extends a long way.............................</div>
</div>
<div id="AD_40ba5b52-8a8e-40cf-99e3-fbb9cbea8864" class="alarms-desc">

 My short descrip 2
 <div id="tool_40ba5b52-8a8e-40cf-99e3-fbb9cbea8864" class="tooltip">This is my long description that extends a long way.............................</div>
 </div>
 <div id="AD_40ba5b52-8a8e-40cf-99e3-fbb9cbea8865" class="alarms-desc">

  My short descrip 3
 <div id="tool_40ba5b52-8a8e-40cf-99e3-fbb9cbea8865" class="tooltip">This is my long description that extends a long way.............................</div>
 </div>

有什么建议我需要改变吗？

【问题讨论】：

这是一个 JSFiddle：jsfiddle.net/X4ffw - 闪烁是因为您的工具提示遮挡了它下方的 div，您可以将工具提示放在一边吗？
理想情况下我希望它们显示在下方，因为我认为当我有更长的简短描述时看起来会更好

标签： jquery

【解决方案1】：

有一个名为 hoverIntent - http://cherne.net/brian/resources/jquery.hoverIntent.html 的 jQuery 插件可能会有所帮助。它不会立即触发 mouseenter 和 mouseleave 事件，而是等待鼠标光标静止一段时间（您可以调整灵敏度和超时），因此如果您快速将鼠标悬停在每个项目上，则只会显示最后一个悬停的项目工具提示。

【讨论】：