Element : évènement mouseover

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'évènementmouseover est déclenché à partir d'unElement 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ènementsmouseover etmouseenter.

HTML

html

<ul>  <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 listetest.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 listetest.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,);