Element : évènement mouseout

L'évènement mouseout est déclenché à partir d'un Element lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. mouseout est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.

Se propage/remonte dans le DOM Oui
Annulable Oui
Interface MouseEvent
Propriété pour la gestion d'évènements onmouseout

Exemples

Dans l'exemple suivant, on illustre la différence entre mouseout et mouseleave. Ce dernier est ajouté à <ul> pour colorer la liste en violet lorsque la souris quitte <ul>. mouseout est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.

En essayant cet exemple, vous pourrez voir que mouseout est envoyé aux éléments individuels de la liste tandis que mouseleave est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.

HTML

<ul id="test">
  <li>élément 1</li>
  <li>élément 2</li>
  <li>élément 3</li>
</ul>

JavaScript

let test = document.getElementById("test");

// On affiche la liste en violet lorsque le curseur quitte
// l'élément <ul>
test.addEventListener("mouseleave", function( event ) {   
  // on cible la cible de mouseleave
  event.target.style.color = "purple";

  // on réinitialise la couleur après quelques instants
  setTimeout(function() {
    event.target.style.color = "";
  }, 1000);
}, false);

// On affiche les éléments <li> en orange lorsque la souris
// les quitte
test.addEventListener("mouseout", function( event ) {   
  // on cible la cible de mouseout
  event.target.style.color = "orange";

 // on réinitialise la couleur après quelques instants
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

Résultat

Spécifications

Spécification État
UI Events
La définition de 'mouseout' dans cette spécification.
Version de travail
Document Object Model (DOM) Level 3 Events Specification
La définition de 'mouseout' dans cette spécification.
Obsolete

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
mouseout eventChrome Support complet OuiEdge Support complet 12Firefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi