事件泡泡問題（我想..！）

我有一個大的DIV #bigdiv。當我將它懸停時，我想要一個小的信息DIV #info出現在大div中。問題：當我將鼠標放在#info上時（一旦我通過懸停#bigdiv使它出現），它使它（#info）無限地出現和消失。這裏是我的代碼：事件泡泡問題（我想..！）

jQuery('#bigdiv').live("hover", function(){ 
    jQuery("#info").toggle(); 
});

更新

我試圖mashappslabs的解決方案（的mouseenter /鼠標離開），我試圖T.J. Crowder的一個（不使用live（））：結果相同。

在這兩種情況下，小div仍然顯示並永遠消失。

來源

2011-05-09 glabus

你可以發佈你的HTML和CSS代碼。你的代碼適合我。 http://jsfiddle.net/ynhat/XZN5s/ – YNhat 2011-05-09 05:31:57

@YNhat：是的，這會有所幫助。 :-)我可以複製類似的行爲與我的答案鏈接的例子，但只有@glabus可以告訴我們這是否也是他/她看到的行爲。 – 2011-05-09 05:44:43

@dandan @glabus：那麼你的代碼的其他部分並沒有做正確的事情，我爲你發佈的這個例子工程http：// jsfiddle。net/2aCJ2 /，查看CSS，HTML和jQuery的代碼，如果需要更多幫助，可以在這裏發佈更多的代碼。乾杯。 – forthehackofit 2011-05-09 15:57:12

@glabus

使絕對#info位置

#info{ 
position:absolute; 
top: 20px; 
left:40px; 
}

可以動態地設置頂部和左側與jquery.css也

來源

2011-05-09 05:29:02 kobe

他不應該那樣做。 – 2011-05-09 05:35:41

@ T.j是的我同意， – kobe 2011-05-09 05:39:41

...在我的例子中，我沒有。 :-) – 2011-05-09 05:45:11

它看起來像在live版本的hover一個小錯誤。對比this example，使用live，與this one使用事件處理程序實際上bigdiv（計數器在那裏，所以我們知道什麼時候情況正在改變）。問題在於當您將鼠標移動到info div（單詞「info」）並將其移出（仍在bigdiv內）時。所以答案可能不是使用live，雖然我猜你有一個使用live的原因，所以這可能不方便。

您可能知道hover基本上只是mouseenter和mouseleave（它們是特定於IE的事件，但jQuery在不提供它們的瀏覽器上模擬它們）的組合。但是mouseenter和mouseleave不要泡;這是他們爲什麼有用的一部分。但是，相關的（而不是IE特定的）mouseover和mouseout事件泡泡，因此它看起來像是~~可能是~~是特定於委託處理的mouseenter/mouseleave仿真中的一個錯誤。（編輯：具體來說，bug #9069，該項目已上報，正在積極致力於對）

來源

2011-05-09 05:38:09

你使用什麼瀏覽器？這兩個例子對我來說都很完美（FF 4.0.1，Linux） – nico 2011-05-09 05:41:01

@nico：一定要將鼠標移動到單詞信息上並再次輸出（但仍在框內）。我已經嘗試過Linux上的Chrome 10，Firefox 3.6，Opera 11以及Windows上的IE6和IE7。 – 2011-05-09 05:43:22

@ T.J。 Crowder：好的，現在我看到了問題。我誤解了原來的問題。 – nico 2011-05-09 05:54:53

使用了mouseenter和鼠標離開，在http://jsfiddle.net/2aCJ2/檢查工作的例子，這裏是代碼： CSS：

#big {width: 500px; height:500px; border: 1px solid #ccc; padding: 10px;} 
#info {display: none; border: 2px solid #ddd;}

HTML：

<div id="big"> 
<div id="info"> 
    <p>Hello I'm visible</p> 
</div> 
</div>

的jQuery：

$("#big") 
.mouseenter(function(e) { 
    $("#info").show(); 
}) 
.mouseleave(function(e) { 
    $("#info").hide(); 
});

希望它有幫助。乾杯

來源

2011-05-09 07:27:10 forthehackofit

事件泡泡問題（我想..！）

回答

相關問題