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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mouseover event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi