('div') माउसेंटर ('ए') पर माउसलेव

Question

मेरी समस्या निम्न है: मुझे एक ट्रिगर (ए) और पॉपअप (div) मिला है। Div एंकर के अंदर घोंसला नहीं झूठ बोलता है।

• जब मैं एक पर होवर करता हूं, तो मैं div को दिखाना चाहता हूं।
• जब मैं एक div से जाता हूं, तो मैं इसे दिखाना चाहता हूं।
• जब मैं div छोड़ देता हूं, तो मैं इसे बंद करना चाहता हूं।
• जब मैं एक पर होवर करता हूं और div में प्रवेश किए बिना छोड़ देता हूं, तो मैं div को बंद करना चाहता हूं।

मुझे इनमें से अधिकतर पता चला, लेकिन अब मैं आवश्यकता संख्या के साथ struggeling हूँ। 2. एक पर माउसलेव की जांच करते समय, मैं जांचता हूं कि div पर माउससेंटर है या नहीं। यदि ऐसा है, तो मैं माउसलेव को रोकना चाहता हूं। यदि नहीं, तो मैं 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) 
      }; 
    }); 

Answer 1

जो आप करने की कोशिश कर रहे हैं वह काफी सरल है। ट्रिगर में प्रवेश करते समय, पैनल (परत, पॉपअप, जो भी हो) की पहचान करें, .data() का उपयोग करके एक दूसरे के संदर्भ को सहेजें और ईवेंट हैंडलर जांचें कि संबंधित लक्ष्य या तो ट्रिगर (पैनल दृश्य से) या पैनल (ट्रिगर व्यू से)। मैंने एक साथ कुछ फेंक दिया। यह देखने के लिए कंसोल लॉग पर एक नज़र डालें कि यह कैसे काम करता है ... http://jsfiddle.net/rodneyrehm/X5uRD/

Answer 2

सबसे अधिक संभावना काम नहीं करेगा कि ... कोई। मैं सुझाव दूंगा कि आप mouseenter और mouseleave को <div> तत्व पर कॉलबैक भी जोड़ें और उन्हें एक वैश्विक चर सेट करें जो आपके अन्य कॉलबैक को उनकी घटनाओं को कैसे संभालना है, यानी "यदि वैश्विक चर सत्य है, तो पॉपअप को छिपाना न करें माउसलेव, अन्यथा पॉपअप छुपाएं "या ऐसा कुछ।

अन्य दृष्टिकोण यह जांचना होगा कि माउस पॉपअप के अंदर है या नहीं, जब mouseleave कॉलबैक पॉपअप को छिपाने की कोशिश करता है। यद्यपि यह मूल्यवान है उससे कहीं अधिक काम हो सकता है।

Answer 3

मुझे विश्वास है कि आपके कार्यान्वयन के साथ समस्या यह है कि div पर mouseleavea से जल्द ही आग लग जाएगी।

$('.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 घटना से एक ही टाइमर का उपयोग करने के लिए करना होगा कि:

यह आपको कुछ देना होगा। आप इसके साथ मदद करने के लिए बेन आलमैन के doTimeout plugin का उपयोग करने पर विचार करना चाह सकते हैं। यह (आमतौर पर) setTimeout/clearTimeout के साथ मैन्युअल रूप से काम करने से अधिक स्पष्ट कोड में परिणाम देता है।