J'ai ce code:
<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>
Si vous cliquez sur la boîte rouge, la boîte bleue apparaîtra du bas ... lorsque onMouseOver la boîte bleue est appelée, onMouseOut du père est appelée aussi ...
Connaissez-vous une solution de contournement pour ne pas voir l'alerte si la souris est toujours à l'intérieur de "père".
Réponses:
3 pour la réponse № 1Voici un violon mis à jour avec un exemple de travail: http://jsfiddle.net/SXj2W/2/
Lorsque onmouseout est renvoyé, vous devez vérifier que la cible associée à l'événement n'est pas un élément enfant de votre parent DIV. Vous pouvez le faire en utilisant le code ci-dessous.
Ajoutez une fonction pour appeler au survol de votre page <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");
}
Et puis mettez à jour votre div parent pour ressembler à:
<div id="father" style="width:50px; height:50px;overflow:hidden;" onmouseout="onMouseOut(this,event)">