Qu’est-ce que les curseurs en CSS ?
Chaque jour, nous utilisons déjà des curseurs personnalisés. Cette interaction est rendue possible grâce à l'utilisation de curseurs modifiés, par exemple lorsque vous survolez des boutons, le curseur du pointeur se transforme en main, ou lorsque vous survolez le texte et que le curseur se transforme en curseur de texte.
comparaison de chaînes java
Toutefois, les curseurs peuvent également être utilisés pour offrir à nos utilisateurs diverses opportunités créatives supplémentaires.
Nous devons être conscients que CSS dispose déjà de curseurs par défaut pour diverses actions souvent effectuées avant de commencer à développer nos curseurs personnalisés.
Ces curseurs offrent des options d'action à l'endroit précis sur lequel vous survolez. Les exemples incluent des curseurs qui indiquent que vous devez cliquer sur des liens, glisser-déposer des éléments, zoomer et dézoomer sur des objets, etc.
Utilisez la propriété CSS Cursor pour décrire le type de curseur souhaité.
Propriété du curseur CSS
Nous pouvons spécifier le type de curseur qui doit être affiché à l'utilisateur à l'aide de la propriété CSS Cursor.
L'utilisation de photos comme boutons d'envoi sur les formulaires est une application utile de cette fonctionnalité. Par défaut, une main apparaît à la place d'un pointeur lorsqu'un curseur se trouve au-dessus d'un lien. Cependant, le bouton Soumettre d'un formulaire n'entraîne pas le changement de formulaire. Cela sert d'indice visuel indiquant que l'image est cliquable à chaque fois que quelqu'un survole une image qui est un bouton d'envoi.
Cette propriété est spécifiée par zéro ou plusieurs valeurs séparées par des virgules, suivies d'une valeur de mot-clé si nécessaire, et chacune fera référence au fichier image.
Syntaxe
cursor: value;
Valeurs des propriétés
| Auto: | Le paramètre par défaut de cet attribut consiste à placer le curseur.
| Alias: | Cet attribut permet d'afficher l'indicateur lié à la création du curseur.
| Défilement intégral : | Le curseur dans cet attribut indique le défilement.
| Cellule: | Le curseur dans cette propriété indique qu'une cellule ou un groupe de cellules est actuellement choisi.
| Menu contextuel: | Le curseur dans cet attribut montre la présence d'un menu contextuel.
| Col-redimensionner : | Lorsque le curseur se trouve au-dessus d'une colonne de cette propriété, il peut être redimensionné horizontalement.
| Copie: | Le curseur dans cette propriété indique que quelque chose doit être copié.
| Réticule : | Le curseur apparaît sous forme de réticule dans cet attribut.
| Défaut: | Le curseur par défaut.
| Redimensionnement électronique : | Le curseur dans cet attribut indique que le bord droit d'une boîte doit être déplacé.
| Il-redimensionner : | Le curseur dans cet attribut représente un curseur de redimensionnement bidirectionnel.
| Aide: | Dans cette propriété, le curseur indique que l'assistance est accessible.
| Se déplacer: | Le pointeur dans cette propriété implique que quelque chose doit être déplacé
| . n-redimensionner : | Lors de l'utilisation de la propriété n-resize, le pointeur indique que la limite supérieure d'une boîte doit être décalée.
| Quel redimensionnement : | Avec cette propriété, le curseur indique que le bord d'une boîte doit être décalé vers la droite et vers le haut.
| Nouveau redimensionnement : | Le curseur de redimensionnement bidirectionnel est indiqué par cet attribut.
| Ns-redimensionner : | Un curseur de redimensionnement bidirectionnel est indiqué par l'attribut ns-resize.
| Nouveau-redimensionnement : | Le curseur dans cet attribut indique que les bords supérieur et inférieur d'une boîte doivent être déplacés vers le haut et vers la gauche.
| Redimensionnement du nez : | Le curseur de redimensionnement bidirectionnel est indiqué par cet attribut.
| Aucune baisse: | Le curseur dans cet attribut indique que l'objet extrait ne peut pas être déposé à cet emplacement.
| Aucun: | Aucun curseur n'est affiché pour l'élément selon cet attribut.
| Interdit: | Le curseur dans cette propriété indique que l'action demandée ne sera pas effectuée.
| Aiguille: | Le curseur dans cette propriété sert de pointeur et affiche la progression du lien.
| Progrès: | Le curseur dans cet attribut indique que le programme est actif.
| Redimensionnement de ligne : | Le curseur montre que cette fonctionnalité permet le redimensionnement vertical des lignes.
| Redimensionnement S : | Lors de l'utilisation de cette propriété, le pointeur indique que la limite inférieure d'une boîte doit être abaissée.
| Redimensionner : | Le curseur dans cet attribut indique que le bord d'une boîte doit être décalé vers la droite et vers le bas.
| Redimensionnement logiciel : | Le curseur dans cet attribut indique que les bords gauche et inférieur d'une boîte doivent être déplacés.
| Texte: | Le curseur dans cet attribut indique le texte qui peut être choisi.
| URL : | Cette propriété contient une liste d'URL de curseur personnalisées séparées par des virgules et un curseur générique à la fin de la liste.
| Texte vertical : | Le curseur dans cet attribut affiche les sélections de texte verticales possibles.
| Redimensionnement W : | Lors de l'utilisation de cette propriété, le pointeur indique que le bord gauche d'une boîte doit être déplacé.
Exemple
Cet exemple montre comment utiliser la propriété du curseur. Le programme est occupé puisque la valeur de la propriété du curseur est définie sur attendre.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Sortir
Nous pouvons spécifier le type de curseur qui doit être affiché à l'utilisateur à l'aide de la propriété CSS Cursor. L'utilisation de photos comme boutons d'envoi sur les formulaires est une application utile de cette fonctionnalité. Par défaut, une main apparaît à la place d'un pointeur lorsqu'un curseur se trouve au-dessus d'un lien.
