Comment changer de curseur en un pointeur à main dans CSS

Il existe de nombreux types de curseurs qui sont utilisés sur différents écrans. Vous pouvez modifier le type de curseur en utilisant la propriété CSS Cursor, qui spécifie le type de curseur à afficher pour l'utilisateur, par exemple, pointeur à main, saisir, copier, etc. Nous pouvons modifier un curseur ordinaire dans un pointeur à main en donnant la valeur du «pointeur» à la propriété du curseur.

Dans cet article, nous apprendrons:

• "le curseur" propriété
• Syntaxe de la propriété du curseur
• Comment changer le curseur en un pointeur à main dans CSS?

Commençons!

Propriété CSS «curseur»

CSS "le curseur»Les propriétés contrôlent l'apparence du pointeur de la souris lorsqu'il est sur un élément. La propriété du curseur dans CSS nous permet de changer un curseur ordinaire en un curseur à main, un curseur de copie, un curseur de cellule, un curseur Grab, etc. Chaque forme de curseur sert des fins différentes. Par exemple, le curseur de copie indique la copie du texte, et le pointeur à main indique de cliquer sur des liens ou des menus. Maintenant, nous passons à la syntaxe de la propriété du curseur.

Syntaxe de la propriété du curseur

La syntaxe de la propriété du curseur est:

curseur: valeur;

À la place de 'valeur', Nous pouvons attribuer la valeur du curseur que nous voulons afficher à l'écran. Par exemple, pointeur, copier, saisir et bien d'autres.

Après avoir compris la syntaxe du curseur, nous passerons à l'exemple dans lequel nous modifions le curseur ordinaire dans un pointeur à main.

Comment changer de curseur en un pointeur à main dans CSS?

Voyons un exemple pratique pour illustrer le fonctionnement de la propriété du curseur.

Exemple

Dans cet exemple, nous créerons une liste dans le fichier HTML qui contiendrait trois éléments:

• Html


• CSS


• Javascrip

Actuellement, notre curseur ressemble à ceci:

Après cela, nous passerons au fichier CSS et définirons la valeur du curseur sur un «aiguille«Pour changer le type de curseur en pointeur manuel. De plus, nous allons définir la marge de la liste comme «25px»Et la marge-gauche comme«500px"En effet, il créera de l'espace entre les éléments de la liste et également à partir du côté gauche de la liste:

li
curseur: pointeur;
marge: 25px;
marge-gauche: 500px;

Nous avons défini la valeur du curseur sur «aiguille«, Qui passera à un pointeur à main lorsque l'utilisateur survolera un élément de liste.

Après l'implémentation du code CSS, accédez au HTML et voyez le résultat:

Ici, nous pouvons voir que chaque fois que le curseur se déplace vers l'élément de liste, il se transforme en pointeur à main. C'est à cause du «le curseur" propriété

Conclusion

La propriété du curseur dans CSS permet de modifier un curseur ordinaire en un pointeur à main. Pour modifier le curseur ordinaire sur un pointeur à main, vous devez attribuer le «aiguille«Valeur pour la propriété du curseur. Vous pouvez appliquer tout type de curseur que vous souhaitez afficher à l'écran. Cet article montre la méthode de modification du curseur en un pointeur à main.