Skip to content

Latest commit

 

History

History
110 lines (88 loc) · 2.71 KB

index.md

File metadata and controls

110 lines (88 loc) · 2.71 KB
Raw
title slug
Element : évènement mouseover
Web/API/Element/mouseover_event

{{APIRef}}

L'évènement mouseover est déclenché à partir d'un {{domxref("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 {{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement {{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}

Exemples

L'exemple suivant illustre la différence entre les évènements mouseover et mouseenter.

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

{{EmbedLiveSample('Exemples')}}

Spécifications

{{Specifications}}

Compatibilité des navigateurs

{{Compat}}

Voir aussi