Element : évènement mouseover

L'évènement mouseover est déclenché à partir d'un Element lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.

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

Exemples

L'exemple suivant illustre la différence entre les évènements mouseover et mouseenter (en-US).

HTML

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

JavaScript

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

// Ce gestionnaire ne sera exécuté qu'une fois
// lorsque le curseur se déplace sur la liste
test.addEventListener("mouseenter", function( event ) {
  // on met l'accent sur la cible de mouseenter
  event.target.style.color = "purple";

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

// Ce gestionnaire sera exécuté à chaque fois que le curseur
// se déplacera sur un autre élément de la liste
test.addEventListener("mouseover", function( event ) {
  // on met l'accent sur la cible de mouseover
  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

Specification
UI Events
# event-type-mouseover
HTML Standard
# handler-onmouseover

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi