Curseur
La classe curseur définit la propriété cursor. Elle détermine le style de curseur affiché lors du survol d’un élément.
Aperçu | Raccourci de classe CSS | Style appliqué |
cursor-default
| cursor: default;
|
cursor-copy
| cursor: copy;
|
cursor-grab
| cursor: grab;
|
cursor-help
| cursor: help;
|
cursor-move
| cursor: move;
|
cursor-not-allowed
| cursor: not-allowed;
|
cursor-pointer
| cursor: pointer;
|
cursor-text
| cursor: text;
|
cursor-zoom-in
| cursor: zoom-in;
|
cursor-zoom-out
| cursor: zoom-out;
|
Exemples
Curseur par défaut
cursor-default
<a href="#" class="cursor-default">
Lorsque l’on passe la souris dessus, cet élément affiche
le curseur par défaut.
</a>
Curseur de copie
cursor-copy
<a href="#" class="cursor-copy">
Lorsque l’on passe la souris dessus, cet élément affiche
le curseur de copie. Celui-ci indique que le contenu peut
être copié.
</a>
Curseur de prise
cursor-grab
<a href="#" class="cursor-grab">
Lorsque l’on passe la souris dessus, cet élément affiche
le curseur de prise. Celui-ci indique que le contenu peut
être manipulé.
</a>
Curseur d’aide
cursor-help
<a href="#" class="cursor-help">
Lorsque l’on passe la souris dessus, cet élément affiche
le curseur d’aide. Celui-ci indique que d’autres
renseignements sont disponibles.
</a>
Curseur de déplacement
cursor-move
<a href="#" class="cursor-move">
Lorsque l’on passe la souris dessus, cet élément affiche
le curseur de déplacement. Celui-ci indique que le contenu
peut être déplacé.
</a>
Curseur non permis
cursor-not-allowed
<a href="#" class="cursor-not-allowed">
Lorsque l’on passe la souris dessus, cet élément affiche
le curseur non permis. Celui-ci indique que l’action n’est
pas permise.
</a>
Curseur de pointeur
cursor-pointer
<a href="#" class="cursor-pointer">
Lorsque l’on passe la souris dessus, cet élément affiche
le curseur de pointeur. Celui-ci indique que l’élément est
cliquable.
</a>
Curseur de texte
cursor-text
<a href="#" class="cursor-text">
Lorsque l’on passe la souris dessus, cet élément affiche
le curseur de texte. Celui-ci indique que le texte peut
être sélectionné.
</a>
Curseur de zoom avant
cursor-zoom-in
<a href="#" class="cursor-zoom-in">
Lorsque l’on passe la souris dessus, cet élément affiche
le curseur de zoom avant. Celui-ci indique qu’il est
possible d’augmenter l’effet de rapprochement.
</a>
Curseur de zoom arrière
cursor-zoom-out
<a href="#" class="cursor-zoom-out">
Lorsque l’on passe la souris dessus, cet élément affiche
le curseur de zoom arrière. Celui-ci indique qu’il est
possible de diminuer l’effet de rapprochement.
</a>
Style conditionnel Appliquer ces styles à des tailles d’écran précises Utilisez un préfixe de mise en page réactive pour appliquer cette classe uniquement à une taille d’écran précise. Voici les points d’arrêt possibles : xs: > 480pxsm: > 640pxmd: > 768pxlg: > 1024pxxl: > 1280px
<div class="xs:cursor-pointer ...">
...
</div>
En savoir plus sur le préfixe de mise en page réactive.
Appliquer ces styles à des états spécifiques Utilisez un préfixe d’état pour appliquer cette classe uniquement à un état d’interaction spécifié. Voici les états possibles : <div class="hover:cursor-pointer ...">
...
</div>
En savoir plus sur le préfixe d’état. 2025-10-01