मेरे पास यह कोड है:
<div id="father" style="width:50px; height:50px;overflow:hidden;" onMouseOut="alert("called");">
<div id="container" style="margin-top:0px;width:100%;height:100%;transition: margin 2s;">
<div style="width: 50px;height:50px;background-color:rgb(255,0,0);" onClick="document.getElementById("container").style.marginTop="-50px""></div>
<div style="width: 50px;height:50px;background-color:rgb(0,0,255);" onClick="document.getElementById("container").style.marginTop="0px""></div>
</div>
</div>
यदि आप लाल बॉक्स पर क्लिक करते हैं, तो नीले रंग का बॉक्स नीचे से दिखाई देगा ... जब onMouseOver को नीले बॉक्स कहा जाता है, तो पिता से onMouseOut को भी बुलाया जाता है ...
क्या आपको पता है कि अगर माउस अभी भी "पिता" के अंदर है, तो अलर्ट न देखें।
उत्तर:
जवाब के लिए 3 № 1यहाँ काम कर रहे उदाहरण के साथ एक अद्यतन फ़िडेल है: http://jsfiddle.net/SXj2W/2/
जब onmouseout को निकाल दिया जाता है, तो आपको यह देखना होगा कि घटना का संबंधित लक्ष्य आपके माता-पिता का बाल तत्व नहीं है DIV। आप नीचे दिए गए कोड का उपयोग करके ऐसा कर सकते हैं।
अपने पृष्ठ के माउसआउट पर कॉल करने के लिए एक फ़ंक्शन जोड़ें <HEAD>
function onMouseOut(self,event) {
var e = event.toElement || event.relatedTarget;
while(e && e.parentNode && e.parentNode != window) {
if (e.parentNode == self|| e == self) {
if(e.preventDefault) e.preventDefault();
return false;
}
e = e.parentNode;
}
alert("Mouseout on father");
}
और फिर अपने पैरेंट डिव को अपडेट करें जैसे कि:
<div id="father" style="width:50px; height:50px;overflow:hidden;" onmouseout="onMouseOut(this,event)">