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
<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
Spécifications
Spécification | État |
---|---|
UI Events La définition de 'mouseover' dans cette spécification. |
Version de travail |
Document Object Model (DOM) Level 3 Events Specification La définition de 'mouseover' dans cette spécification. |
Obsolete |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Une introduction aux évènements
- D'autres évènements connexes