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.
Voici la syntaxe pour changer le curseur en état d'attente en JavaScript -
document.getElementById('id').style.cursor = 'value';
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.
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.
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.
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 -
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!
Comment rendre l'arrière-plan transparent dans PS
Que signifie Linux ?
Comment créer une animation GIF sur PS
Touches de raccourci de l'écran de verrouillage Windows
Le rôle des commandes du terminal Linux
La différence entre scratch et python
La différence entre MATE60 et MATE60PRO
Pourquoi Amazon ne peut-il pas ouvrir
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
