Element : évènement mouseover

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

HTML

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

JavaScript

js
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
# handler-onmouseover

Compatibilité des navigateurs

Voir aussi