Dans CSS, divers types de curseurs sont utilisés pour différents éléments HTML et pour modifier le type de curseur, le «le curseur»La propriété est utilisée. Il vous permet de modifier le type de curseur et de définir la valeur du curseur que vous souhaitez afficher à l'écran. En tant que fonctionnalité supplémentaire, il vous permet également de définir votre propre image de curseur.

Dans ce guide, vous apprendrez:

• Qu'est-ce que la propriété Cursor CSS
• Comment changer de curseur en image sur planant en utilisant CSS

Alors, commençons!

Qu'est-ce que la propriété CSS «curseur»?

Pour contrôler l'apparence de la souris sur un élément HTML, le «le curseur»La propriété de CSS peut être utilisée. Il permet de modifier le curseur ordinaire en différents types tels que le curseur de copie, le pointeur à main, la prise et bien d'autres. Vous pouvez également définir votre propre curseur personnalisé en définissant l'URL de l'image dans la propriété du curseur.

Syntaxe

La syntaxe de la propriété de curseur est donnée comme suit:

curseur: url ();

Dans la syntaxe donnée ci-dessus, attribuez le chemin de l'image dans le «URL ()"Que vous voulez afficher à l'écran.

Nous allons maintenant passer à l'exemple pour transformer le curseur ordinaire en une image en volant.

Comment changer de curseur en image sur planant en utilisant CSS?

Pour changer le curseur en une image sur planant, d'abord, ajoutez un élément dans HTML.

Exemple 1: Modification du curseur en une image sur planée à l'aide de la propriété du curseur

Nous allons créer un titre

et nom de la classe de bouton "btn".

Html

Changer de curseur en image sur volant

Cliquez sur moi

Actuellement, le survol du bouton affichera le curseur par défaut:

Passez maintenant au CSS et changez le curseur en image.

Ensuite, définissez le chemin de l'image dans le «URL ()". Par exemple, nous avons spécifié «icon.SVG"Comme notre image sélectionnée. Ensuite, définissez la valeur de la propriété du curseur comme «auto".

CSS

.btn
curseur: URL (icône.svg), auto;
rembourrage: 10px;

Enregistrez le code ci-dessus et exécutez le fichier HTML pour voir le résultat suivant:

La sortie donnée indique que le curseur est transformé avec succès en une image en survol.

Note: "auto»Est utilisé comme une option alternative dans la propriété du curseur; Lorsque l'image ne se charge pas ou que le chemin du fichier ou le fichier lui-même est manquant, l'icône par défaut s'affiche à l'écran en raison de la valeur automatique.

Exemple 2: Définition du curseur par défaut sur planant

Par exemple, nous donnerons l'URL de l'image et ne définirons que la valeur de la propriété du curseur comme «auto»:

curseur: url (), auto;

En conséquence, le curseur ne changera pas lorsqu'il a survolé le bouton:

Exemple 3: Définition de l'image alternative sur volant

À la place de l'auto, vous pouvez définir différentes valeurs du curseur que vous souhaitez afficher comme alternative à l'image. Par exemple, nous modifierons la valeur de la propriété du curseur de «auto" pour "aiguille»:

curseur: url (), pointeur;

Comme vous pouvez le voir dans la sortie ci-dessous, le curseur est transformé en un pointeur à main lorsqu'il plane sur le bouton:

Nous avons fourni la méthode la plus simple pour modifier l'image du curseur sur le plan en utilisant CSS.

Conclusion

Dans CSS, vous pouvez changer le curseur en l'image sur planant en utilisant le «le curseur" propriété. Il permet de modifier un curseur ordinaire en une image en attribuant le «URL”De l'image à la propriété du curseur. Vous pouvez appliquer tout type de curseur que vous souhaitez afficher lorsqu'il a plané sur un élément. Cet article a démontré la méthode de modification du curseur en un pointeur à main.