suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie ändere ich den Cursor in JavaScript/jQuery in den Wartezustand?

Wie ändere ich den Cursor in JavaScript/jQuery in den Wartezustand?

WBOY
WBOYnach vorne
2023-08-30 11:29:061297Durchsuche

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

Wir können die Ereignisse onmouseover und onmouseout verwenden, um den Cursor so festzulegen oder zu ändern, dass er in den Wartezustand wechselt. In JavaScript gibt es verschiedene Arten von Mausereignissen, die unterschiedliche Funktionen auf der Maus ausführen. Schauen wir uns einige Mausereignisse an.

  • onmousedown – Diese Ereignisse treten auf, wenn die Maustaste auf ein HTML-Element gedrückt wird

  • onmouseenter – Tritt auf, wenn sich der Zeiger aus einem Element herausbewegt

  • onmousemove – Diese Ereignisse treten auf, wenn sich der Zeiger über ein HTML-Element bewegt

  • onmouseout - Tritt auf, wenn der Zeiger das Element verlässt

  • onmouseover - Dieses Ereignis tritt auf, wenn sich die Maus über einem HTML-Element befindet.

  • onmouseup – Loslassen der Zeigertaste auf dem HTML-Element

Die Ereignisse onmouseover und onmouseout werden verwendet, wenn der Zeiger das HTML-Element verlässt. Das onmouseover-Ereignis ist dem onmouseenter-Ereignis sehr ähnlich, außer dass onmouseenter keine Blasen erzeugt. Das onmouseover-Ereignis funktioniert nicht mit HTML-Tags – html, head, title, style, meta, base, bdo, br, iframe, param und script.

Die Eigenschaft

style.cursor wird verwendet, um festzulegen oder zurückzugeben, welche Art von Cursor der Zeiger anzeigt. Wenn sich der Zeiger über dem Element befindet, gibt er einen Zeichenfolgenwert zurück, der den sichtbaren Mauszeiger darstellt. Automatisch ist der Standardwert. Es gehört zur Cursor-Eigenschaft von JavaScript.

Grammatik

Hier ist die Syntax zum Ändern des Cursors in den Wartezustand in JavaScript -

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

Parameter

Verschiedene Arten von Werten, die für Stileigenschaften definiert sind, wie Alias, Vollbildlauf, Auto, Zelle, Kontextmenü, Fadenkreuz, Standard, E-Größenänderung, Ew-Größenänderung, Verschieben, N-Größenänderung, Ne-Größenänderung, Neu- Größe ändern, keine, Zeiger, Fortschritt und Vererbung.

Rückgabewert

Der Zeiger befindet sich über einem Element und es wird ein Zeichenfolgenwert zurückgegeben, der den angezeigten Mauszeiger darstellt.

Beispiel

In diesem Beispiel ändern wir den Cursor mithilfe von JavaScript in den Wartezustand. 

<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>

Hier verwenden wir das onmouseover-Mausereignis für die Absatzmarke mit dem Funktionsnamen myFunction(). Für die myFunction( )-Methode verwenden wir das Objekt „document.getElementById( )“, um die style.cursor-Eigenschaft zu implementieren, und die ID übernimmt die „Box“, für die wir das CSS-Element definiert haben. Der Attributwert des Cursors ist „wait“, was bedeutet, dass der Cursor jedes Mal in einem Wartezustand erscheint, wenn er sich über einem HTML-Element befindet.

Beispiel

Nehmen wir ein weiteres Beispiel und sehen, wie man den Cursor in JavaScript mithilfe verschiedener Mausereignisse in einen Wartezustand versetzt. 

<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>

Wenn sich die Maus über dem Element befindet, wechselt das Erscheinungsbild des Cursors in den Wartezustand, wie im Bild unten gezeigt -

Beispiel

In diesen Beispielen sehen wir, wie man mit Hilfe von jQuery den Cursor in einen Wartezustand versetzt. 

<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>

Wenn sich die Maus über einem Element befindet, wechselt das Erscheinungsbild des Cursors in einen Wartezustand, wie in der Abbildung unten dargestellt -

Wenn die Maus das Element verlässt, kehrt das Erscheinungsbild des Cursors auf den Standardwert zurück, wie im Bild gezeigt -

Wie wir im Beispiel sehen können, verwenden wir hier „$(this).css(“cursor“, „progress“)“, um den Cursorstatus auf den Fortschritt des div-Elements zu ändern. Wir haben dies im Programm angegeben . Um den Cursor wieder in seinen Standardzustand zu versetzen, können Sie die Cursoreigenschaften auf den Standardwert „$(this).css(“cursor“, „default“)“ setzen.

In diesem Artikel erklären wir anhand von Beispielen, wie Sie den Cursor in den Wartezustand versetzen. Wir sehen hier zwei verschiedene Beispiele. Im ersten Beispiel verwenden wir das Ereignis onmouseover, um den Cursorstatus zu ändern. Im zweiten Beispiel verwenden wir die Ereignisse onmouseover und onmouseout, um den Cursor in den Wartezustand zu versetzen. Für beide Beispiele in JavaScript verwenden wir die Eigenschaft style.cursor, um den Wert des Cursors zu definieren. Im dritten Beispiel verwenden wir jQuery, um das Erscheinungsbild des Cursors über die jQuery-Cursoreigenschaften zu ändern.

Das obige ist der detaillierte Inhalt vonWie ändere ich den Cursor in JavaScript/jQuery in den Wartezustand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Schließen Sie die Summe eines Elements in JavaScript ausNächster Artikel：Schließen Sie die Summe eines Elements in JavaScript aus

In Verbindung stehende Artikel

Mehr sehen