recherche

Maison  >  Article  >  interface Web  >  Comment changer le curseur pour attendre l'état en JavaScript/jQuery ?

Comment changer le curseur pour attendre l'état en JavaScript/jQuery ?

WBOY
WBOYavant
2023-08-30 11:29:061295parcourir

如何在 JavaScript/jQuery 中将光标更改为等待状态？

Nous pouvons utiliser les événements onmouseover et onmouseout pour définir ou modifier le curseur afin d'entrer dans l'état d'attente. En JavaScript, nous avons différents types d'événements de souris qui exécutent différentes fonctions sur la souris. Regardons quelques événements de souris.

  • onmousedown - Ces événements se produisent lorsque le bouton de la souris est enfoncé sur un élément HTML

  • onmouseenter - Se produit lorsque le pointeur quitte un élément

  • onmousemove - Ces événements se produisent lorsque le pointeur se déplace sur un élément HTML

  • onmouseout - Se produit lorsque le pointeur quitte l'élément

  • onmouseover - Cet événement se produit lorsque la souris survole un élément HTML.

  • onmouseup - Libération du bouton pointeur sur l'élément HTML

Les événements onmouseover et onmouseout sont utilisés lorsque le pointeur quitte l'élément HTML. L'événement onmouseover est très similaire à l'événement onmouseenter, sauf que onmouseenter ne fait pas de bulle. L'événement onmouseover ne fonctionne pas avec les balises HTML - html, head, title, style, meta, base, bdo, br, iframe, param et script.

La propriété

style.cursor est utilisée pour définir ou renvoyer le type de curseur affiché par le pointeur. Lorsque le pointeur est sur l'élément, il renvoie une valeur de chaîne représentant le curseur visible de la souris. Automatique est la valeur par défaut. Il appartient à la propriété Cursor de JavaScript.

Grammaire

Voici la syntaxe pour changer le curseur en état d'attente en JavaScript -

document.getElementById('id').style.cursor = 'value';

Paramètres

Différents types de valeurs définies pour les propriétés de style telles que alias, full-scroll, auto, cell, context menu, crosshair, default, e-resize, ew-resize, move, n-resize, ne-resize, new- redimensionner, aucun, pointeurs, progression et héritage.

Valeur de retour

Le pointeur se trouve sur un élément et une valeur de chaîne représentant le curseur de la souris affiché est renvoyée.

Exemple

Dans cet exemple, nous allons changer le curseur en état d'attente à l'aide de JavaScript. 

<html>
<head>
   <style>
      #textbox {
         padding: 16px ;
         text-align: center;
         font-size: 18px;
         height: 90px;
         background-color: grey;
         width: 500px;
         color: white;
      }
   </style>
</head>
<body>
   <h2>Changing Cursor to Waiting State</h2>
   <p id="textbox" onmouseover="sampleFunction()">
      This is a sample program to see how to change the cursor appearance when the pointer is over an element
   </p>
   <script>
      function sampleFunction() {
         document.getElementById("textbox").style.cursor = "wait";
      }
   </script>
</body>
</html>

Ici, nous utilisons l'événement de souris onmouseover pour la marque de paragraphe avec le nom de fonction myFunction(). Pour la méthode myFunction(), nous utiliserons l'objet "document.getElementById()" pour implémenter la propriété style.cursor, et l'id prendra la "box" pour laquelle nous avons défini l'élément css. La valeur de l'attribut du curseur est "wait", ce qui signifie que lorsque le curseur survole un élément HTML, le curseur apparaîtra dans un état d'attente à chaque fois qu'il apparaîtra.

Exemple

Prenons un autre exemple et voyons comment faire passer le curseur en état d'attente en JavaScript à l'aide de différents événements de souris. 

<html>
<head>
   <style>
      #mybutton {
         cursor: default;
      }
   </style>
</head>
<body>
   <button id="mybutton">Hover over me</button>
   <script>
      document.getElementById("mybutton").onmouseover = function() {
         document.getElementById("mybutton").style.cursor = "wait";
      }
      document.getElementById("mybutton").onmouseout = function() {
         document.getElementById("mybutton").style.cursor = "default";
      }
   </script>
</body>
</html>

Lorsque la souris survole l'élément, l'apparence du curseur passe à l'état d'attente, comme le montre l'image ci-dessous -

Exemple

Dans ces exemples, nous verrons comment faire passer le curseur en état d'attente à l'aide de jQuery. 

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
   </script>
   <style>
      #event {
         height: 50px;
         padding: 30px;
         height: 60px;
         margin: 2 auto;
         color: white;
         width: 650px;
         background: grey;
      }
      #center {
         text-align:center;
      }
   </style>
</head>
<body id="center">
   <h2>Changing the Cursor Appearance</h2>
   <div id = "event">
      Mouse Hover
   </div>
   <script>
      $("#event").hover(function() {
         $(this).css("cursor", "progress");
      }, function() {
         $(this).css("cursor", "default");
      });
   </script>
</body>
</html>

Lorsque la souris survole un élément, l'apparence du curseur passe à un état d'attente, comme le montre la figure ci-dessous -

Lorsque la souris quitte l'élément, l'apparence du curseur revient à la valeur par défaut, comme indiqué sur l'image -

Comme nous pouvons le voir dans l'exemple, nous utilisons ici "$(this).css("cursor", "progress")" pour changer l'état du curseur en progression de l'élément div. Nous l'avons spécifié dans le programme. . Pour remettre le curseur à son état par défaut, vous pouvez définir les propriétés du curseur par défaut "$(this).css("cursor", "default")".

Dans cet article, nous expliquons avec des exemples comment changer le curseur en état d'attente. Nous voyons ici deux exemples différents, dans le premier exemple, nous utilisons l'événement onmouseover pour changer l'état du curseur. Dans le deuxième exemple, nous utilisons les événements onmouseover et onmouseout pour faire passer le curseur en état d'attente. Pour les deux exemples en JavaScript, nous utilisons la propriété style.cursor pour définir la valeur du curseur. Pour le troisième exemple, nous utilisons jQuery pour modifier l'apparence du curseur via les propriétés du curseur jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Exclure la somme d'un élément en JavaScriptArticle suivant：Exclure la somme d'un élément en JavaScript

Articles Liés

Voir plus