Un bouton qui ne change pas d'icône de souris au survol laisse planer un doute : est-il cliquable, ou juste un morceau de texte coloré ? cursor répond à cette question avant même le clic, en changeant l'apparence de la souris pour annoncer ce qui va se passer.
Cette propriété devient indispensable dès qu'un élément cliquable n'est pas une balise HTML native pensée pour ça, comme un <div> transformé en bouton avec un simple gestionnaire de clic.
Définition
cursor choisit l'icône affichée par la souris lorsqu'elle survole un élément, généralement en tandem avec la pseudo-classe :hover pour les changements d'apparence qui l'accompagnent. Le navigateur propose plusieurs dizaines de valeurs prédéfinies, chacune associée à une signification précise que la plupart des systèmes d'exploitation reconnaissent instantanément, quel que soit le site visité.
Les valeurs les plus utilisées
| Valeur | Icône affichée | Usage typique |
|---|---|---|
pointer | Une main qui pointe | Élément cliquable |
default | La flèche standard | Texte ou zone non interactive |
not-allowed | Un cercle barré | Action désactivée |
grab | Une main ouverte | Élément déplaçable au glisser |
text | Un curseur en forme de I | Zone de texte sélectionnable |
wait | Un indicateur de chargement | Action en cours de traitement |
Exemple concret : un div transformé en bouton
.carte-cliquable {
cursor: pointer;
}
.carte-cliquable.desactivee {
cursor: not-allowed;
}Sur une carte de produit entièrement cliquable, ce curseur signale clairement l'interaction possible, sans qu'il soit nécessaire de survoler précisément un lien texte au milieu de l'image. La version désactivée prévient l'utilisateur avant même qu'il clique, plutôt que de le laisser découvrir que rien ne s'est passé.
Au delà du clic : signaler d'autres types d'interaction
cursor ne se limite pas à annoncer un clic. Une liste réorganisable au glisser bascule souvent entre grab au repos et grabbing pendant le déplacement effectif, pour distinguer visuellement les deux moments. Une action asynchrone, comme l'envoi d'un formulaire qui attend la réponse d'un serveur, peut afficher cursor: wait sur toute la page le temps du chargement, une manière discrète de signaler qu'un clic supplémentaire ne servirait à rien. Une galerie d'images utilise parfois zoom-in pour indiquer qu'un clic agrandira la photo survolée.
Le piège : redondant sur un lien, indispensable sur un div
Sur un <a href>, cursor: pointer est déjà le comportement par défaut du navigateur : l'ajouter ne change rien. Sur un <button> natif, le résultat varie selon les navigateurs, certains conservant la flèche standard, ce qui pousse beaucoup d'équipes à forcer pointer par cohérence avec les liens. Sur un <div> rendu cliquable en JavaScript, en revanche, rien ne se produit sans intervention manuelle : ni curseur adapté, ni accessibilité clavier. cursor reste purement visuel, contrairement à pointer-events, qui agit réellement sur la capacité d'un élément à réagir au clic.
Questions fréquentes
cursor: pointer est-il vraiment inutile sur tous les liens ?
Sur un <a href> classique, oui, la valeur par défaut du navigateur suffit déjà. Elle redevient utile sur un lien dont le comportement par défaut a été modifié ailleurs dans le CSS, ou sur un élément qui se comporte comme un lien sans en être un techniquement, par exemple un élément portant un attribut role="button".
Le curseur suffit-il à rendre un div accessible au clavier ?
Non, absolument pas. cursor agit uniquement sur ce que voit un utilisateur de souris ; il ne donne ni le focus clavier, ni la possibilité de déclencher un clic avec la touche Entrée, ni aucune information à un lecteur d'écran. Ces aspects se règlent séparément, avec un attribut tabindex, un role approprié, et un gestionnaire d'événement clavier en plus du clic.
Peut-on utiliser une image personnalisée comme curseur ?
Oui, cursor accepte une URL d'image suivie d'une valeur de secours, par exemple cursor: url("main.png"), pointer;. La valeur de secours reste indispensable : si l'image ne se charge pas, le navigateur retombe sur un curseur standard plutôt que de n'afficher aucune icône du tout, ce qui laisserait la souris invisible sur certains systèmes.