Les curseurs de notre souris

Bonjour à toi !

Aujourd'hui ça sera un tutoriel très très court basé sur les curseurs de notre souris. Mais de quoi parle t-on ? Je parle ici de ce à quoi ressemble notre souris selon l'endroit d'une page web où on se trouve.

Par exemple, par défaut nous avons celui-ci lors de la navigation : , celui-ci quand on est dans une zone de texte ou sur du texte : et celui-ci quand on passe sur un lien :


On peut vouloir changer le curseur pour lui ajouter une petite déco, par exemple un point d'interrogation quand on passe sur un infobulle :

Passe sur moi

Mais on peut également complètement changer le curseur et y ajouter une grosse image ou autre chose :

Passe sur moi

Tout est faisable en fait.
Attention ici, il ne faut pas oublier les valeurs par défaut. Mettre un pointer comme pour un lien sur quelque chose de non-cliquable peut fortement perturber.
De même, il faut faire attention que le curseur soit pratique, qu'il ne gêne pas la navigation et qu'il permette quand même les sélections : mon second exemple fait parti des choses qu'il vaut mieux éviter de faire


Et bien en fait, c'est tout simple : on applique la propriété CSS "cursor" à notre élément. Sur mes exemples du dessus, ma CSS pourrait être :

Code:

p{
cursor:help;
}

Et pour la seconde :

Code:

p{
cursor: url(https://i.servimg.com/u/f86/19/47/12/29/468px-10.png), auto;
}

Un curseur peut être appliqué à toute une page, auquel cas on l'applique sur le body :

Code:

body{
cursor:help;
}

Ou alors aux liens :

Code:

a{
cursor:pointer;
}

Bref, ils s'appliquent à n'importe quel élément : qu'il ait une class, un id, que ça soit une balise, etc...


Il y a beaucoup de valeurs possibles pour les curseurs. Tu peux les retrouver juste ici.
Mais pour les plus répandus :
cursor:help; : ajoute un petit point d'interrogation à coté de la souris:
cursor:pointer; : transforme la souris en "main pointeur" comme pour les liens par défaut
cursor: wait; : transforme le curseur en petit rond qui tourne, comme quand une page charge
cursor: text; : transforme le curseur en la petite barre de sélection de texte.
cursor: progress; : ajoute le petit rond d'attente en plus de la souris par défaut

On peut aussi y ajouter une image avec ce code :
cursor: url(URL DE L'IMAGE), auto;

---

Je le répète, c'est tout de même à utiliser avec modération sur les forums. Il ne faut pas chambouler l'utilisateur par des curseurs excentriques ou qui n'ont rien à voir avec celui de base. De mon coté, je suis toujours perturbée quand je vois une "pointer" qui n'est pas sur quelque chose de cliquable