बाल तत्व के साथ जावास्क्रिप्ट माउसओवर/माउसआउट समस्या

Question

मुझे यह छोटी समस्या है और मैं आपकी मदद के लिए अनुरोध कर रहा हूं। मैं इस

<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()"> 
    <img id="child" src="button.png" style="visibility: hidden" /> 
</div> 

<script type="text/javascript"> 
    function MyFuncHover() { 
     // Here I have some code that makes the "child" visible 
    } 

    function MyFuncOut() { 
     // Here I have some code that makes the "child" invisible again 
    } 
</script> 

की तरह एक div तत्व है, जो अंदर मैं एक img तत्व है, के रूप में आप देख सकते हैं, छवि div का एक बच्चा है। मैं चाहता हूं कि जब मैं div छोड़ दूं, तो बच्चा गायब हो जाएगा। फिर भी, ऐसा लगता है कि जब मैं छवि पर माउस को ले जाता हूं, MyFuncOut() फ़ंक्शन को कॉल किया जाता है (क्योंकि, मुझे लगता है, मैं छवि को घुमाकर div छोड़ देता हूं)। मैं नहीं चाहता कि ऐसा हो। मुझे MyFuncOut() फ़ंक्शन केवल तभी कॉल किया जाना चाहिए जब मैं div क्षेत्र छोड़ दूं।

मुझे नहीं पता था कि जब आप अपने माउस को बच्चे के नियंत्रण में ले जाते हैं, तो यह माता-पिता माउसआउट ईवेंट को कॉल करता है (भले ही मैं बच्चे पर हूं, मैं अभी भी माता-पिता पर हूं)। मैं इसमें फंस गया हूं और मुझे आपकी बहुत अच्छी सलाह चाहिए। धन्यवाद!

परिवर्तन

शाबाशी जब मैं बच्चे को "माउसआउट" करता हूं तो इवेंट बबलिंग माता-पिता को "माउसआउट" ईवेंट नहीं भेजेगी। जब मैं बच्चे को "माउसओवर" करता हूं तो यह "माउसओवर" ईवेंट को माता-पिता को भी नहीं भेजेगा। यही वह नहीं है जो मुझे चाहिए। जब मैं बच्चे को "माउसओवर" करता हूं तो मुझे माता-पिता के "माउसआउट" ईवेंट की आवश्यकता नहीं होती है। उसे ले लो? घटना बुलबुला उपयोगी है जब मैं नहीं चाहता, उदाहरण के लिए, बच्चे पर एक क्लिक घटना माता-पिता को प्रचारित करने के लिए, लेकिन यह मेरा मामला नहीं है। अजीब बात यह है कि मेरे पास एक ही माता-पिता के अंदर अन्य तत्व हैं जो माता-पिता के "माउसआउट" ईवेंट को आग नहीं देते हैं जब मैं उन्हें "माउसओवर" करता हूं।

Answer 1

आप "mouseenter" और "mouseleave" jQuery में उपलब्ध घटनाओं का उपयोग कर सकते हैं, यहाँ नीचे कोड, है

$(document).ready(function() { 
     $("#parent").mouseenter(function() { 
      $("#child").show(); 
     }); 
     $("#parent").mouseleave(function() { 
      $("#child").hide(); 
     }); 
    }); 

ऊपर, एक घटना को संलग्न करने के

<div id="parent"> 
    <img id="child" src="button.png" style="display:none;" /> 
</div> 

Answer 2

मुझे इसके साथ भी समस्याएं थीं और मैं इसे काम करने में सक्षम नहीं हूं। यही वह है जो मैंने इसके बजाय किया और यह बहुत आसान है और जावास्क्रिप्ट नहीं है इसलिए यह तेज़ है और इसे बंद नहीं किया जा सकता है।

div.container 
{ 
opacity:0.0; 
filter:alpha(opacity="00"); 
} 

div.container:hover 
{ 
opacity:1.0; 
filter:alpha(opacity="100"); 
} 

आप इसे अस्पष्टता के लिए सीएसएस 3 संक्रमण भी जोड़ सकते हैं ताकि इसे एक आसान अनुभव मिल सके।

Answer 3

बस जोड़ने के एक अगर आपके MyFuncOut कार्य करने के लिए बयान जो लक्ष्य की जाँच करता है छवि

if (event.target !== imageNode) { 
    imageNode.style.display = 'none' 
} 

नहीं है

Answer 4

आप नीचे दिए गए समाधान का उपयोग कर सकते है, जो यह शुद्ध जावास्क्रिप्ट है और मैं सफलता के साथ प्रयोग किया जाता है।

var container = document.getElementById("container"); 
var mouse = {x: 0, y: 0}; 

function mouseTracking(e) { 
    mouse.x = e.clientX || e.pageX; 
    mouse.y = e.clientY || e.pageY; 
    var containerRectangle = container.getBoundingClientRect(); 

    if (mouse.x > containerRectangle.left && mouse.x < containerRectangle.right && 
      mouse.y > containerRectangle.top && mouse.y < containerRectangle.bottom) { 
     // Mouse is inside container. 
    } else { 
     // Mouse is outside container. 
    } 
} 
document.onmousemove = function() { 
    if (document.addEventListener) { 
     document.addEventListener('mousemove', function (e) { 
      mouseTracking(e); 
     }, false); 
    } else if (document.attachEvent) { 
     // For IE8 and earlier versions. 
     mouseTracking(window.event); 
    } 
} 

मुझे आशा है कि इससे मदद मिलती है।