mouseover

L'événement mouseover est déclenché lorsqu'un dispositif de pointage passe au dessus d'un élément lié à l'écouteur d'événement, ou au dessus de l'un de ses enfants.

Informations générales

Specification

DOM L3

Interface

MouseEvent

Propagation

Oui

Annulable

Oui

Cible

Élément

Action par défaut

Aucune

Propriétés

Exemple

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

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

<script>
  var test = document.getElementById("test");
  
  
  // ce gestionnaire sera exécuté une seule fois lorsque le curseur passera au dessus de la liste non ordonnée
  test.addEventListener("mouseenter", function( event ) {   
    // met en surbrillance la cible de mouseenter
    event.target.style.color = "purple";

    // réinitialise la couleur après un court moment
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
  
  
  // ce gestionnaire sera exécuté à chaque fois que le curseur passe au dessus de chaque élément de la liste
  test.addEventListener("mouseover", function( event ) {   
    // met en surbrillance la cible de mouseover
    event.target.style.color = "orange";

    // réinitialise la couleur après un court moment
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
</script>

Compatibilité des navigateurs

[1] Ne fonctionne que pour les éléments <textarea> et quelques types de l'élément <input>.

[2] Implémenté dans bug 218093.

Voir aussi

• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• mouseleave
• contextmenu