如何根據光標移動的元素*改變jQuery .mouseleave（）的行爲？

嗨，大家好，我已經把一個簡單的下拉菜單系統，它使用hoverIntent來顯示子菜單，並且還顯示一個燈箱樣式'熄燈'黑暗的背景。如何根據光標移動的元素*改變jQuery .mouseleave（）的行爲？

我有菜單工作，但我想更新它，所以如果你從一個項目移動到下一個黑暗的背景保持在它的位置而不是消失和再現。

我創建了一個的jsfiddle，所以你可以看到我在談論： http://jsfiddle.net/gGd6Y/10/

嘗試懸停在菜單項1，然後移動到第2項

我希望能夠看到鼠標光標移動到HoverIntent調用的.mouseleave（）部分中的元素，那麼如果它是另一個菜單項，我將防止黑暗背景被關閉。

隨着HTML目前的設置方式無法完成。影子涵蓋了其他可能的元素。所以當你mouseleave你是在陰影上而不是其他的LIs上面。

我所做的菜單出現在陰影之上。我推遲了陰影淡出操作，並確保在實際淡出之前沒有其他菜單項被擱置。

2012-04-22 14:28:54 iambriansreed

這是主要的問題。在顯示陰影時，其他菜單項目上沒有mouseenter，因爲它位於頂部，因此阻止向它們發送鼠標事件。 – jfriend00 2012-04-22 14:40:25

@ jfriend00 Tru dat。 – iambriansreed 2012-04-22 14:41:49

非常棒，非常感謝iambriansreed！ – 2012-04-23 08:33:35

簡單的解決方案是將mouseleave監聽器添加到所有項目的容器中。

更靈活的解決方案是爲每個元素存儲布爾值is_element_hovered。當mouseleave事件發生時，設置小的延遲，並在延遲後檢查您的布爾值並正確設置背景動畫。

2012-04-22 14:30:13

我已經「zerovoted」了你，因爲這可以使用，如果解決一點，但它是一個容易的事情太多的努力。 – rcdmk 2012-04-22 15:08:57

問題在於陰影背景位於導航欄的頂部，因此陰影顯示時，導航欄上沒有mouseenter。在修復之前，無法解決這個問題。 – jfriend00 2012-04-22 15:14:37

我已經改變了菜單項留在覆蓋的頂部。

編輯：在我的最後評論提出

解決方案：

2012-04-22 14:46:57 rcdmk

+1我喜歡你如何將陰影淡出動作附加到菜單上。偷竊現在。 – iambriansreed 2012-04-22 15:03:52

另一個很好的答案，謝謝。現在，隱藏的菜單項目不再被設計所需的陰影覆蓋。我會看看我是否可以通過添加一些背景來達到類似的效果。 – 2012-04-23 09:17:59

另一種方法是爲每個菜單項添加一個「小覆蓋圖」，以便在顯示覆蓋圖並在菜單項上保留鼠標捕獲時顯示它們。 – rcdmk 2012-04-24 13:50:28

回答