Section courante

A propos

Section administrative du site

mouseover

 jQuery
JavaScript Version 1.0+

Syntaxe

.mouseover() 1.0+
.mouseover( handler(eventObject) ) 1.0+
.mouseover( [eventData], handler(eventObject) ) 1.4.3+

Paramètres

Nom Description
handler Ce paramètre permet d'indiquer la fonction à appeler lorsque l'événement est déclenché.
eventObject Ce paramètre permet d'indiquer les paramètres d'événement de la fonction à appeler lorsque l'événement est déclenché.
eventData Ce paramètre permet d'indiquer les données d'événement de la fonction à appeler lorsque lorsque l'événement est déclenché.

Description

Cette méthode permet d'effectuer un lien vers un gestionnaire d'événement MouseOver du JavaScript, ou déclencheur dans un élément.

Exemple

L'exemple suivant permet de changer le message du «div» nommé «CurrentZone» lorsque la souris passe au dessus d'une des 3 zones :

  1. <html>
  2. <head>
  3. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  4. </head>
  5. <body>
  6. <div id="CurrentZone"></div>
  7. <div id="zoneA" style="width:100px;height:200px;background-color:red;"> 
  8. Rouge
  9. </div>
  10. <div id="zoneB" style="width:100px;height:200px;background-color:green;"> 
  11. Vert
  12. </div>
  13. <div id="zoneC" style="width:100px;height:200px;background-color:blue;"> 
  14. Bleu
  15. </div>
  16. <script>
  17. $("#zoneA").mouseover(function() { 
  18.  $("#CurrentZone").html('Zone : A');
  19. });
  20. $("#zoneB").mouseover(function() { 
  21.  $("#CurrentZone").html('Zone : B');
  22. });
  23. $("#zoneC").mouseover(function() { 
  24.  $("#CurrentZone").html('Zone : C');
  25. });
  26. </script>
  27. </body>
  28. </html>

on obtiendra le résultat suivant :



Dernière mise à jour : Mercredi, le 18 novembre 2015