Element : évènement mouseover
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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 Standard # handler-onmouseover |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
-
D'autres évènements connexes