奇怪的jQuery懸停行爲

我已經花了一段時間閱讀各種其他jQuery懸停問題的帖子，並嘗試不同的事情，讓我的jQuery懸停功能正常工作無濟於事。奇怪的jQuery懸停行爲

我試圖完成

我想隱藏/顯示與jQuery的懸停事件的li元素中的一個div。

發生了什麼事

的DIV隱藏/顯示正確，但如果鼠標移動非常迅速地從一個li元素到下，有時隱藏（鼠標離開）似乎不會得到執行。這留下應該隱藏的div。

演示

http://jsfiddle.net/vJPNT/11/

在演示中，你會看到這樣的效果。包含鏈接「刪除」的div在鼠標滾過li元素時出現，但如果鼠標快速跳轉到下一個li元素，它並不總是消失。

請讓我知道是否需要額外的信息。謝謝。

來源

2012-02-20 crush

+1優秀問題闡述 – 2012-02-20 18:03:05

我將console.log（$（e.target））添加到了你的兩個函數中。似乎有時候e.target是李元素中的一個div。這可能是因爲你捕捉到了傳播的懸停事件。

通過將$（e.target）更改爲$（this），您應該沒問題。

function updateIn(e) { 
    $(this).find('.actions').show();     
    console.log($(e.target)); 
} 

function updateOut(e) { 
    $(this).find('.actions').hide(); 
    console.log($(e.target)); 
} 

$('li.update').hover(updateIn, updateOut); 
$('li.update .actions').hide();

來源

2012-02-20 18:03:36

即將寫入相同。這裏是小提琴：http://jsfiddle.net/vJPNT/26/ – 2012-02-20 18:08:40

感謝您的幫助！ – crush 2012-02-20 18:10:50

function updateIn(e) { 
    $(this).find('.actions').show(); 
    $(this).siblings().find('.actions').hide(); 
} 

function updateOut(e) { 
    $(this).find('.actions').hide(); 
} 

$('li.update').hover(updateIn, updateOut); 
$('li.update .actions').hide();

在每個新的updateIn之前，您應該隱藏其他顯示的操作。

來源

2012-02-20 17:58:15

除了使用e.target不明智（如Jørgen提到的），您的建議 - 儘管這是一個安全的選擇 - 並不是非常有效。 – 2012-02-20 18:12:54

@TJ.I一定是一直在寫這個答案，因爲Jørgen回答，因爲我錯過了他的回答。我意識到這不是最有效的方式，但我認爲只要沒有那麼多的兄弟姐妹，這是一個非常安全的選擇，這可能會超過用戶系統上的輕微開銷。 – 2012-02-20 18:24:15

我絕對同意你的看法。 – 2012-02-20 20:52:35

事件發生在不同的元素中。您的查找功能不僅返回.update類對象。。更新

來源

2012-02-20 18:43:55 Jones

奇怪的jQuery懸停行爲

回答

相關問題