Cursor

Utilitaires CSS pour contrôler l'apparence du curseur au survol d'un élément. Chaque classe applique directement une valeur native de la propriété cursor.

Stable Utilitaires

Aperçu

LIVE PREVIEW — CURSEURS (survolez chaque élément)

.cursor-none

.cursor-auto

.cursor-pointer

.cursor-not-allowed

.cursor-help

.cursor-progress

.cursor-wait

.cursor-grab

.cursor-grabbing

.cursor-text

.cursor-copy

.cursor-alias

Structure HTML

CODE HTML

…

Classes CSS

CLASSE	VALEUR	DESCRIPTION
`.cursor-none`	`cursor: none`	Masque totalement le curseur sur l'élément.
`.cursor-auto`	`cursor: auto`	Le navigateur choisit le curseur approprié selon le contexte.
`.cursor-pointer`	`cursor: pointer`	Curseur main — indique un élément cliquable.
`.cursor-not-allowed`	`cursor: not-allowed`	Curseur interdit — indique une action non autorisée ou un élément désactivé.
`.cursor-help`	`cursor: help`	Curseur point d'interrogation — indique une aide contextuelle disponible.
`.cursor-progress`	`cursor: progress`	Curseur chargement — l'application traite une action mais reste utilisable.
`.cursor-wait`	`cursor: wait`	Curseur sablier — l'application est occupée et l'interaction est bloquée.
`.cursor-grab`	`cursor: grab`	Curseur main ouverte — indique qu'un élément peut être glissé.
`.cursor-grabbing`	`cursor: grabbing`	Curseur main fermée — indique qu'un élément est en cours de déplacement.
`.cursor-text`	`cursor: text`	Curseur I-beam — indique une zone de texte sélectionnable ou éditable.
`.cursor-copy`	`cursor: copy`	Curseur copie — indique qu'un élément peut être copié.
`.cursor-alias`	`cursor: alias`	Curseur alias — indique qu'un raccourci ou un alias va être créé.

Notes & bonnes pratiques

✅ À faire

Utiliser .cursor-not-allowed conjointement avec disabled ou aria-disabled="true" pour renforcer le signal visuel d'un élément non interactif.

✅ À faire

Associer .cursor-grab à l'état au repos et .cursor-grabbing à l'état actif (via JS ou :active) sur les éléments déplaçables.

⚠️ Attention

.cursor-none masque entièrement le curseur. À réserver aux cas d'usage intentionnels (ex : expériences interactives) — ne pas l'utiliser sur des éléments cliquables au risque de dégrader l'utilisabilité.

Cursor · WEBDEV-UI DOCS / V1