Nous pouvons utiliser les propriétés du curseur CSS pour manipuler les images du curseur de différents éléments dans les documents HTML.
The syntax of CSS cursor property is as follows:
Selector {
cursor: /*value*/
}Voici les valeurs de l'attribut de curseur CSS-
| Sr Nom en attente de création | < /th> |
|---|---|
| Défilement complet | Cela signifie un contenu qui peut être défilé dans n'importe quelle direction |
| Automatique | Par défaut, le navigateur définit le curseur |
| cell | signifie qu'une cellule (ou un groupe de cellules ) peut être sélectionné |
| context-menu | signifie que le menu contextuel est disponible< /p> |
| col-resize | < strong> signifie le la colonne peut être redimensionnée horizontalement |
| copier | signifie quoi copier |
| crosshair | Il apparaît comme une ligne croisée |
| Il restitue le curseur par défaut | |
| e-resize | signifie déplacer le bord de la boîte vers la droite (est) Déplacer |
| nouveau-redimensionnement | signifie ajuster la taille du curseur dans les deux sens. signifie que quelque chose peut être saisi
|
| 14 | aider signifie utile |
| 15 | Déplacer signifie déplacer quelque chose
|
| 16 | n-resize signifie le bord de la boîte se déplacera vers le haut (nord) < p> |
| 17 | ne-resize signifie que le bord de la boîte se déplacera vers le haut et vers la droite (nord/est) < p> |
| 18 | new-resize signifie ajuster la taille du curseur dans les deux sens |
| 19 | ns-resize signifie ajuster dans les deux sens Taille du curseur |
| 20 | nw-resize signifie déplacer le bord de la boîte vers le haut et vers la gauche (nord/ouest) |
| 21 | nwse-resize signifie redimensionner le curseur dans les deux sens
|
| 22 | no-drop signifie que l'élément glissé ne peut pas être glissé et déposé ici |
| 23 | AucunAucun curseur n'est présenté pour l'élément |
| 24 | Non autoriséCela signifie que l'action demandée ne sera pas effectuée |
| 25 | Pointeur C'est un pointeur qui représente un lien |
| 26 | Progress signifie que le programme est occupé (en cours) |
| 27 | row- resize signifie que la ligne peut être redimensionnée verticalement |
| 28 | s - resize signifie déplacer le bord de la boîte vers le bas (sud) |
| 29 | se-resize signifie déplacer le bord de la boîte vers le bas et vers la droite (sud/est)
|
| 30 | sw-resize indique qu'une bordure doit être déplacée vers le bas et vers la gauche (sud/ouest) |
| 31 | texte texte pouvant être sélectionné |
| 32 | URL < /p>Liste d'URL séparées par des virgules pour les curseurs personnalisés, avec un curseur universel mentionné à la fin comme étant de sécurité intégrée |
| 33 | texte vertical indique un Texte de mise en page verticale facultatif |
| 34 | w-resize signifie que le bord de la boîte se déplace vers la gauche (ouest) |
| 35 | < /strong>en attente signifie le programme est correct Occupé |
| Agrandir signifie que quelque chose peut être agrandi | |
| 37 | Rétrécir Cela signifie que quelque chose peut être réduit |
| 38 | Initial < /p>Il définit les propriétés du curseur à leurs valeurs par défaut. |
| 39 | InheritedIl hérite de l'attribut curseur de l'élément parent. |
| Ce qui suit est un exemple d'implémentation des propriétés du curseur CSSExemple Démonstration en direct <!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 5px;
float: left;
}
#one {
background-color: beige;
}
#two {
background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>Copier après la connexion Sortie | |
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
