onmouseover avec javascript

Question

Je voudrais div a et div b pour changer de place lorsque la souris est sur div b puis revenez lorsque la souris quitte div a. Mais son super glitchy et basculera même lorsque la souris n'a pas quitté div a. Comment puis-je l'obtenir à pas exécuter navMouseOut lorsque la souris est toujours dans div a, et pourquoi fait-il cela. (S'il vous plaît tester le code pour voir ce qui est erroné)

document.getElementById("b").onmouseover = function() { 
 
    navMouseOver() 
 
}; 
 
document.getElementById("a").onmouseout = function() { 
 
    navMouseOut() 
 
}; 
 

 
function navMouseOver() { 
 
    document.getElementById("a").style = ("top: 50%;"); 
 
    document.getElementById("b").style = ("top: 40%; "); 
 
} 
 

 
function navMouseOut() { 
 
    document.getElementById("a").style = ("top: 40%;"); 
 
    document.getElementById("b").style = ("top: 50%;"); 
 
}

#a { 
 
    position: fixed; 
 
    top: 40%; 
 
    left: 20%; 
 
    background-color: red; 
 
} 
 

 
#b { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 20%; 
 
    background-color: lightblue; 
 
}

<div id="a"> 
 
    <p>content a</p> 
 
</div> 
 
<div id="b"> 
 
    <p>content b...</p> 
 
</div>

Answer 1

utilisation OnMouseEnter au lieu de onmouseover

document.getElementById("b").onmouseenter = function() { 
navMouseOver() 
}; 

document.getElementById("a").onmouseout = function() { 
navMouseOut() 
}; 

Answer 2

Je pense que le problème est sur la propagation, laisser voir cette fonction onmouseout, même si vous laissez votre souris hors de l'élément P mais toujours dans DIV, onmouseout va encore s'exécuter.

vous pouvez écrire html comme ceci:

<div id="a"> 
    content a 
</div> 
<div id="b"> 
    content b... 
</div> 

ou utilisez stopPropagation() ou cancelBubble()

Answer 3

Le problème est que lorsque les éléments changent position, les événements mouseover et mouseenter sont tirés comme élément qui vient d'être positionné sur la souris. Pour éviter cela, vous pouvez utiliser un drapeau qui est basculé true à false qui décide d'exécuter ou non le code de repositionnement.

var target1 = document.getElementById("mouseoverTarget1"); 
 
var switching = false; 
 
var inStartingPosition = true; 
 

 
target1.addEventListener("mouseover", function() { 
 
    if (!switching) { 
 
    switching = true; 
 
    target1.style.top = inStartingPosition ? "50px" : "0px"; 
 
    target2.style.top = inStartingPosition ? "-50px" : "0px"; 
 
    inStartingPosition = inStartingPosition ? false : true; 
 
    console.log("mouseover target 1"); 
 
    setTimeout(() => { 
 
     switching = false; 
 
    }, 100); 
 
    } 
 
}); 
 

 
var target2 = document.getElementById("mouseoverTarget2"); 
 

 
target2.addEventListener("mouseover", function() { 
 
    if (!switching) { 
 
    switching = true; 
 
    target1.style.top = inStartingPosition ? "50px" : "0px"; 
 
    target2.style.top = inStartingPosition ? "-50px" : "0px"; 
 
    inStartingPosition = inStartingPosition ? false : true; 
 
    console.log("mouseover target 2"); 
 
    setTimeout(() => { 
 
     switching = false; 
 
    }, 100); 
 
    } 
 
});

#mouseoverTarget1, #mouseoverTarget2 { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: relative; 
 
} 
 

 
#mouseoverTarget1 { 
 
    background-color: red; 
 
} 
 

 
#mouseoverTarget2 { 
 
    background-color: blue; 
 
}

<div id="mouseoverTarget1"></div> 
 
<div id="mouseoverTarget2"></div>