Transformer le curseur en pointeur manuel en CSS

1. Utilisation de la propriété cursor pour changer le pointeur de la souris en un pointeur à main en CSS
2. Utilisation de la fonction url() dans la propriété cursor pour changer le pointeur de la souris en un pointeur manuel personnalisé en CSS

Cet article présentera des méthodes pour changer le pointeur de la souris en un pointeur à main tout en déplaçant la souris pour répertorier les éléments dans CSS.

Utilisation de la propriété cursor pour changer le pointeur de la souris en un pointeur à main en CSS

Nous pouvons changer la façon dont le pointeur de la souris s’affiche lorsqu’il pointe sur un élément spécifique en utilisant la propriété CSS cursor.

Par exemple, nous pouvons utiliser la propriété pour changer le pointeur de la souris en un pointeur à main en définissant la valeur de la propriété cursor sur pointer. Nous pouvons sélectionner l’élément spécifique dans CSS et appliquer cette propriété.

La propriété cursor a un grand nombre d’options. Certaines options sont help, wait, crosshair, not-allowed, zoom-in, etc.

Par exemple, créez des éléments de liste en utilisant les balises ul et li en HTML, sélectionnez la balise li en CSS et définissez la propriété cursor sur pointer. Lorsque nous déplaçons le pointeur de la souris sur les éléments de la liste, le pointeur de la souris se transforme en une main pointée.

De cette façon, nous pouvons changer le pointeur de la souris en pointeur à main en CSS.

Exemple de code :

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: pointer;
}

Utilisation de la fonction url() dans la propriété cursor pour changer le pointeur de la souris en un pointeur manuel personnalisé en CSS

Nous pouvons également ajouter un pointeur manuel personnalisé en utilisant la fonction url() dans la propriété cursor de CSS.

Il faut préciser l’URL de l’image dans la fonction url(). Nous pouvons spécifier plusieurs URL comme solution de secours afin que si l’une ne fonctionne pas, l’autre puisse fonctionner.

Les multiples fonctions url() sont séparées par une virgule. Lorsque le pointeur de la souris est déplacé vers un élément spécifique, le pointeur personnalisé s’affiche.

Nous pouvons définir l’URL du pointeur de main personnalisé dans la fonction pour changer le pointeur de la souris en pointeur de main dans CSS.

Par exemple, utilisez la même liste que dans la première méthode pour la démonstration. En CSS, sélectionnez la balise li, écrivez la propriété cursor et définissez la propriété cursor sur la fonction url() où l’URL https://img.icons8.com/nolan/32/hand-cursor.png est le paramètre. Ensuite, écrivez auto après une virgule comme solution de repli.

Ainsi, nous pouvons utiliser la fonction url() pour créer un pointeur de main personnalisé et l’afficher en survolant une liste en CSS.

Exemple de code :

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: url("https://img.icons8.com/nolan/32/hand-cursor.png"), auto;
}