Événement onmouseenter
Exemple
Exécute un JavaScript lors du déplacement du pointeur de la souris sur une image :
<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
L'événement onmouseenter se produit lorsque le pointeur de la souris est déplacé sur un élément.
Conseil : cet événement est souvent utilisé avec l' événement onmouseleave , qui se produit lorsque le pointeur de la souris est déplacé hors d'un élément.
Conseil : L'événement onmouseenter est similaire à l' événement onmouseover . La seule différence est que l'événement onmouseenter ne bouillonne pas (ne se propage pas dans la hiérarchie du document). Voir "Plus d'exemples" au bas de cette page pour mieux comprendre les différences.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'événement.
Event | |||||
---|---|---|---|---|---|
onmouseenter | 30.0 | 5.5 | Yes | 6.1 | 11.5 |
Syntaxe
En HTML :
<element onmouseenter="myScript">
En Javascript :
object.onmouseenter = function(){myScript};
En JavaScript, en utilisant la méthode addEventListener() :
object.addEventListener("mouseenter", myScript);
Remarque : La méthode addEventListener() n'est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
Bulles: | Non |
---|---|
Annulable : | Non |
Type d'événement: | SourisEvénement |
Balises HTML compatibles : | Tous les éléments HTML, SAUF : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title> |
Version DOM : | Événements de niveau 2 |
Plus d'exemples
Exemple
Cet exemple montre la différence entre les événements onmousemove, onmouseenter et mouseover :
<div onmousemove="myMoveFunction()">
<p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
<p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
<p id="demo3">I will demonstrate onmouseover!</p>
</div>