嘗試使用show（）和hide（）時發生閃爍效果

我正在嘗試爲我正在構建的網頁創建工具提示功能。我有一張元素表，其中一列包含一個簡短的描述。我試圖創建一個效果，其中用戶將鼠標懸停在簡短說明上，並顯示隱藏的div標記的完整說明。嘗試使用show（）和hide（）時發生閃爍效果

懸停效果正在工作，但如果我向下移動到原始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>

什麼，我需要改變什麼建議嗎？

來源

2011-09-06 Diver Dan

這裏是一個JSFiddle：http://jsfiddle.net/X4ffw/ - 閃爍正在發生，因爲你的工具提示模糊了它下面的div，你能把你的工具提示放到一邊嗎？ – mwan

理想情況下，我希望他們在下面顯示，因爲我認爲看起來更好，因爲我有更長的簡短描述 –

有一個名爲hoverIntent - http://cherne.net/brian/resources/jquery.hoverIntent.html的jQuery插件可能有幫助。它不會立即觸發mouseenter和mouseleave事件，而是等待鼠標光標停留一會兒（您可以調整靈敏度和超時時間），所以如果快速懸停在每個項目上，只有最後一個項目會顯示工具提示。

來源

2011-09-06 23:33:40

嘗試使用show（）和hide（）時發生閃爍效果

回答

相關問題