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è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
html
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
JavaScript
js
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
| Specification |
|---|
| UI Events # event-type-mouseover |
| HTML # handler-onmouseover |
Compatibilité des navigateurs
Voir aussi
- Une introduction aux évènements
- D'autres évènements connexes