我有我的彈出式菜單的以下代碼，父鏈接是頂級鏈接。它會導致彈出窗口顯示。當鼠標進入和退出父鏈接時，Popup淡入並淡出。jquery獲得兩個div作爲一個

但是，我需要它不會淡出彈出窗口，如果鼠標在彈出窗口之上！此刻，只要鼠標進入彈出窗口，它就會淡出。如果這有什麼意義的話，我需要兩個div一起作爲懸停的一員。

// Hovering over the parent <li> 
ParentLink.hover(
    function() 
    { 
     Popup.fadeIn(300, function() { 
     }); 
    }, 
    function() 
    { 
     Popup.fadeOut(400, function() { 
     }); 
    } 
);

來源

2011-06-06 Tom Gullen

你應該*在父窗口內彈出窗口。這可能是最好和更合乎邏輯的方法。懸停會向父級傳播，因此當您將鼠標懸停在彈出窗口上時，它不會觸發懸停事件。 – 2011-06-06 10:00:04

@Salman謝謝，但通過設計這很難做不幸:(看起來像這樣重構它可能是最好的，雖然 – 2011-06-06 10:15:09

我會編輯我的答案。但通常，這是如何彈出菜單通常工作。 – 2011-06-06 10:22:15

你應該在父窗口中嵌套彈出窗口。通過這種方式，當您將鼠標從父級移動到彈出窗口時，父級仍然處於鼠標懸停狀態，因爲彈出式鼠標懸停事件會冒泡到父級上。當鼠標不在父項（加上它的子項）時，鼠標輸出事件將觸發父項。

編輯

如果您不能（或希望）改變的標記，一種可能性是將使用jQuery，喜歡的元素到建議位置：

ParentLink.append(Popup); // moves the Popup element from its current position 
          // and places it as the last child of ParentLink

最可能的是你必須修改你的CSS來匹配變化，所以你可能想先考慮一下。

來源

2011-06-06 10:03:13

謝謝，我已經去了嵌套的內容，這似乎是最簡單的，很多CSS問題，但讓他們最終整理:) – 2011-06-06 10:35:14

在完成淡入淡出後，您可以解除綁定父鏈接的懸停事件。

Popup.fadeIn(300, function() { 
     $(ParentLink).unbind('hover'); 
    });

來源

2011-06-06 09:55:07 mightyplow

This並不能解決當鼠標不在其中任何一個時候如何淡出彈出菜單的問題 – 2011-06-06 09:56:08

你可以爲父鏈接設置一個鼠標懸停事件併爲父鏈接設置一個鼠標懸停事件並彈出。 – mightyplow 2011-06-06 09:58:50

你只需要想一想從邏輯上講，在哪裏放置解除綁定和懸停功能......這可以輕鬆實現解除綁定並將其懸停在適當的位置。 – Raghav 2011-06-06 09:59:08

這不是一個直接回答你的問題，而是一個提示如何可以工作。

爲什麼你不把第二個<div>嵌套到第一個，所以out不會發生？

<div id="ParentLink"> 
    <div id="Popup"></div> 
</div>

有#ParentLink { display: relative; }和#Popup { display: absolute; }，你會被罰款。

但是，對於那些菜單的我總是會使用嵌套的無序列表結構像這樣的：

<ul id="topLevel"> 
    <li id="level1item"> 
     <a href="">Link</a> 
     <ul id="subLevel"> 
      <li> 
      <a href="">Link 2</a> 
      </li> 
     </ul> 
    </li> 
</ul>

來源

2011-06-06 10:03:33 DanielB

至於說，解除綁定事件，而你是懸停彈出，然後再重新綁定它，當你徘徊出：

ParentLink.hover(
    handlerIn, 
    handlerOut 
); 

var handlerIn = function() 
    { 
     Popup.fadeIn(300, popupFadeIn); 
    }; 

var handlerOut = function() 
    { 
     Popup.fadeOut(400); 
    }; 

var popupFadeIn = function() { 
     $(ParentLink).unbind('hover'); 
     $(this).mouseleave(function() { 
      $(ParentLink).hover(
       handlerIn, 
       handlerOut 
     ); 
     }); 
};

順便說一句，我沒有測試過這個

來源

2011-06-06 10:04:54 VAShhh

你可以試試這個：

var inn; 
    $('ParentLink').hover(function() { 
     inn = false; 
     $('p').fadeIn(1000); 
    }, 
    function() { 
     $('Popup').bind('mouseenter mousemove', 
     function() { 
      inn = true; 
     }).mouseout(function() { 
      inn = false; 
     }); 
     if (!inn) $('Popup').fadeOut(1000); 
    });

來源

2011-06-06 10:19:45 thecodeparadox

如果不正常工作，請評論我。 – thecodeparadox 2011-06-06 10:20:08

jquery獲得兩個div作爲一個

回答

編輯

相關問題