檢查（'div'）mouseenter（'a'）mouseleave

我的問題如下：我得到了一個觸發器（a）和一個彈出窗口（div）。 div不會嵌套在錨內。檢查（'div'）mouseenter（'a'）mouseleave

當我將鼠標懸停在a上時，我想讓div顯示出來。
當我從一個div轉到div時，我希望它保持可見。
當我離開div時，我希望它關閉。
當我將鼠標懸停在a上而未進入div時，我想讓div關閉。

我得到了大部分的想法，但現在我正在strugggeling與requierement沒有。 2. 在檢查mouseleave時，我檢查div上是否有mouseenter。如果是這樣，我想放棄鼠標。如果沒有，我想關閉div。

我在做什麼錯？這甚至是正確的做法嗎？

這裏的標記：

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a> 
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>

這裏是jQuery的：

$('.popup_toggle').mouseenter(function() { 
     var element = $(this).next('.popup_div'); 
     $.data(this, 'timer', setTimeout(function() { 
      element.show(100); 
     }, 500)); 
    }); 

    $('.popup_toggle').mouseleave(function() { 
     clearTimeout($.data(this, 'timer')); 
      if($('.popup_div').mouseenter==true) 
      { 
       return false; 
      } 
      else 
      { 
       $('.popup_div').hide(100) 
      }; 
    });

來源

2011-10-11 chabuya

你想要做的事情很簡單。當進入觸發器時，識別面板（圖層，彈出窗口，任何），使用.data（）保存彼此的引用，並讓事件處理程序檢查相關目標是觸發器（從面板視圖）還是面板從觸發器視圖）。我把東西扔在一起。看看控制檯日誌，看看這是如何工作的... http://jsfiddle.net/rodneyrehm/X5uRD/

來源

2011-10-11 12:05:50 rodneyrehm

感謝您的回覆並創建了一個示例！但即使通過它看，我不知道你在那裏做什麼。我必須承認，我在jQuery或編程方面沒有以前的經驗，如果在使用它時出現問題，我需要能夠維護自己的代碼。我不能說爲什麼第一個答案是錯誤的編碼，但我現在要用這種方法，因爲我實際上可以理解它:) – chabuya

這將極有可能無法正常工作......沒有。我建議你增加一個mouseenter和mouseleave回調給你<div>元素，讓他們設置一個全局變量，告訴你的其他回調如何處理他們的事件，即「如果全局變量爲真，不要隱藏彈出窗口mouseleave，否則隱藏彈出「或類似的東西。

另一種方法是在mouseleave回調試圖隱藏彈出框時檢查鼠標是否位於彈出框內。這可能比它值得的工作多得多。

來源

2011-10-11 11:05:32

感謝您的快速回復，我嘗試了全局變量和一個新的計時器，它的作品就像一個魅力！ – chabuya

-1用於提示全局變量並且不注意event.relatedTarget。抱歉。 – rodneyrehm

呃... relatedTarget只能工作，如果你在離開鏈接時立即進入彈出窗口，對嗎？正如axtavt明確指出，彈出窗口不是**鏈接的一部分，我沒有假設它們是直接的鄰居。 –

我相信你的實施的問題是div上的mouseenter將在從amouseleave不久後觸發。

這將使你是這樣的：

$('.popup_toggle').mouseenter(function() { 
    // Clear any pending "hide" timer 
    // Set a show timer 
}); 

$('.popup_toggle').mouseleave(function() { 
    // Clear any pending "show" timer 
    // Set a hide timer 
}); 

$('.popup_div').mouseenter(function() { 
    // Clear any pending "hide" timer 
});

請注意，你必須確保你無論從.popup_toggle事件和.popup_div事件訪問同一個計時器。您可能需要考慮使用Ben Alman的doTimeout plugin來解決這個問題。它（通常）會比手動使用setTimeout/clearTimeout產生更清晰的代碼。

來源

2011-10-11 11:44:25 zjs

檢查（'div'）mouseenter（'a'）mouseleave

回答

相關問題