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';
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
