Utilisez CSS pour changer l'apparence de votre curseur
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.
Syntaxe
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 | |
