En CSS, différents types de curseurs sont utilisés pour différents éléments HTML, et pour changer le type de curseur, le ' le curseur ” la propriété est utilisée. Il vous permet de changer 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é CSS du curseur
- Comment changer le curseur en image sur Hover 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 ” propriété de CSS peut être utilisée. Il permet de changer le curseur normal en différents types tels que le curseur de copie, le pointeur manuel, la saisie 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é du curseur est donnée comme suit :
curseur : url ( ) ;Dans la syntaxe ci-dessus, affectez le chemin de l'image dans le champ ' URL() ” que vous souhaitez afficher à l'écran.
Nous allons maintenant passer à l'exemple pour changer le curseur normal en une image au survol.
Comment changer le curseur en image au survol à l'aide de CSS ?
Pour changer le curseur en image au survol, ajoutez d'abord un élément en HTML.
Exemple 1 : Changer le curseur en image au survol à l'aide de la propriété du curseur
Nous allons créer une rubrique
et un nom de classe de bouton ' btn ”.
HTML
< corps >< h1 > Changer le curseur en image au survol h1 >
< bouton classer = 'btn' > Cliquez sur moi bouton >
corps >
Actuellement, passer la souris sur le bouton affichera le curseur par défaut :
Passez maintenant au CSS et changez le curseur sur l'image.
Ensuite, définissez le chemin de l'image dans le ' URL() ”. Par exemple, nous avons spécifié 'je avec.svg ” comme notre image sélectionnée. Ensuite, définissez la valeur de la propriété du curseur sur ' auto ”.
CSS
.btn {curseur : url ( icône.svg ) , automatique ;
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 au survol.
Noter: ' auto ” est utilisé comme option alternative dans la propriété du curseur ; lorsque l'image ne se charge pas ou que le chemin d'accès au 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 au survol
Par exemple, nous donnerons l'URL de l'image et ne définirons la valeur de la propriété du curseur que sur ' auto ” :
curseur : url ( ) , automatique ;Par conséquent, le curseur ne changera pas lorsqu'il survolera le bouton :
Exemple 3 : Définition d'une alternative d'image au survol
Au lieu de auto, vous pouvez définir différentes valeurs du curseur que vous souhaitez afficher comme alternative à l'image. Par exemple, nous allons changer la valeur de la propriété du curseur de ' auto ' à ' aiguille ” :
curseur : url ( ) , pointeur ;Comme vous pouvez le voir dans la sortie ci-dessous, le curseur se transforme en pointeur manuel lorsqu'il survole le bouton :
Nous avons fourni la méthode la plus simple pour changer l'image du curseur au survol à l'aide de CSS.
Conclusion
En CSS, vous pouvez changer le curseur en image au survol en utilisant le ' le curseur ' propriété. Il permet de changer un curseur régulier à une image en attribuant le ' URL ” de l'image à la propriété du curseur. Vous pouvez appliquer n'importe quel type de curseur que vous souhaitez afficher lorsqu'il a survolé un élément. Cet article a démontré la méthode de changement du curseur en pointeur manuel.