Bonjour.

Il y a quelque chose que je ne m'explique pas avec le code ci-dessous: lorsque mon pointer survole la div#mouse, la div#pop s'affiche. Mais lorsque, mon pointer étant en train de survoler #mouse, il vient à survoler le span à l'intérieur, les deux événements liés à #mouse se répètent: autrement dit #pop disparait et s'affiche à nouveau. Pourtant, je suis toujours en train de survoler #mouse.

Comment éviter ce problème, tout en conservant #mouse comme élément déclencheur des événements ?

Merci.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
<div id="mouse" style="width: 200px; background: yellow; text-align: center; height: 100px;">
	<span style="background: white;">pointez ici</span>
</div>
 
<div id="pop" style="opacity: 0;">POP</div>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
var mouse = document.getElementById('mouse'),
	pop = document.getElementById('pop');
 
mouse.addEventListener('mouseover', function() {
	$('#pop').animate({opacity:'1'},'slow');
}, false);
mouse.addEventListener('mouseout', function() {
	$('#pop').animate({opacity:'0'},'fast');
}, false);