Question

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

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

如果我向上鼠标它可以正常工作。

我的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>

我需要改变哪些建议？

Answer 1

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

尝试使用show（）和hide（）时发生闪烁效果

1 个答案: