Element : évènement mouseover

Baseline Large disponibilité

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.

En savoir plus
Voir la compatibilité complète

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

Si l'élément cible a des éléments fils, les évènements mouseout et mouseover sont déclenchés lorsque la souris passe sur les limites de ces éléments également, et pas seulement sur l'élément cible lui-même. En général, le comportement des évènements mouseenter et mouseleave est plus logique, car ils ne sont pas affectés par le déplacement dans les éléments fils.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènement.

addEventListener("mouseover", (event) => { })

onmouseover = (event) => { }

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

JavaScript

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

// Ce gestionnaire n'est 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 est exécuté à chaque fois que le curseur se déplace
// 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,
);