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';
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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!
