Php, code, ia et marketing

logo-TR
Menu

Tout savoir sur la propriété cursor en CSS

/ Code / Par

 

La propriété cursor permet de modifier l’apparence du curseur de la souris lorsqu’il survole un élément HTML. Elle est utile pour indiquer à l’utilisateur qu’un élément est cliquable, qu’une action est possible ou simplement pour améliorer l’ergonomie.

Il existe une large gamme de valeurs prédéfinies pour adapter le curseur à chaque situation : lien, déplacement, chargement, aide, saisie de texte, etc.

1. cursor: pointer; — Curseur de lien cliquable

Utilisé pour indiquer qu’un élément est interactif, comme un bouton ou un lien.


.cursor-pointer {
  cursor: pointer;
}
Passe la souris ici : le curseur devient une main (comme un lien).

2. cursor: default; — Curseur normal

Affiche le curseur par défaut du système. C’est souvent la flèche classique.


.cursor-default {
  cursor: default;
}
Curseur par défaut (flèche standard).

3. cursor: text; — Curseur de saisie (barre verticale)

Utilisé pour indiquer qu’un champ est éditable, comme une zone de texte ou un champ de formulaire.


.cursor-text {
  cursor: text;
}
Curseur de texte (barre verticale) — souvent utilisé pour les champs input.

4. cursor: move; — Curseur de déplacement

Indique que l’élément peut être déplacé, glissé ou réorganisé.


.cursor-move {
  cursor: move;
}
Le curseur change pour un symbole de déplacement.

5. cursor: not-allowed; — Action non autorisée

Utilisé pour signaler qu’une action est désactivée ou impossible.


.cursor-not-allowed {
  cursor: not-allowed;
}
Ici, le curseur indique qu’une action n’est pas permise.

6. cursor: help; — Curseur d’aide

Affiche un point d’interrogation ou une icône d’aide selon le système. Idéal pour des éléments informatifs ou contextuels.


.cursor-help {
  cursor: help;
}
Passe la souris ici pour voir un curseur d’aide.

7. cursor: wait; — Curseur de chargement

Indique qu’un traitement est en cours. Affiche généralement une icône d’attente (sablier ou cercle).


.cursor-wait {
  cursor: wait;
}
Un traitement est en attente.

Résumé des curseurs utiles

  • pointer : main pour les éléments cliquables
  • text : champ de saisie
  • move : déplacement possible
  • not-allowed : action désactivée
  • help : besoin d’information
  • wait : en cours de chargement

Tu peux également utiliser des curseurs personnalisés avec l’URL d’une image : cursor: url('mon-curseur.png'), auto;

Conclusion

La propriété cursor est idéale pour rendre ton site plus intuitif. Elle donne des indices visuels à l’utilisateur sans JavaScript et améliore l’ergonomie générale.