/* Valeurs avec un mot-clé */cursor: pointer;cursor: auto;/* Une valeur d'URL avec un mot-clé par défaut */cursor:url(hand.cur), pointer;/* Une valeur d'URL avec des coordonnées et un mot-clé par défaut */cursor:url(cursor1.png) 4 12,
auto;cursor:url(cursor2.png) 2 2,
pointer;/* Valeurs globales */cursor: inherit;cursor: initial;cursor: unset;
La propriété cursor peut être définie grâce à zéro ou plusieurs valeurs <url> séparées par des virgules et suivi par un unique mot-clé obligatoire. Chaque <url> doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.
Chaque <url> peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) <x><y> Ces coordonnées permettent de paramétrer le point d'action (hotspot) du curseur par rapport au coin en haut à gauche de l'image.
Par exemple, on peut indiquer deux images grâce à deux valeurs <url> et fournir des coordonnées <x><y> pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé progress :
Une url(…) ou une liste d'URL séparées par des virgules url(…), url(…), … pointant vers un fichier image. On peut utiliser plusieurs url(), au cas où certains types d'images ne sont pas pris en charge. Il est obligatoire qu'une valeur non-URL soit présente à la fin de cette liste.
Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.
Catégorie
Valeur CSS
Rendu
Description
Général
auto
Le navigateur détermine le curseur à afficher en fonction du contexte
(par exemple, l'effet sera équivalent à text lors du survol
du texte).
default
Le curseur par défaut de la plateforme (qui est généralement une
flèche).
none
Aucun curseur n'est affiché.
Liens & états
context-menu
Un menu contextuel est disponible sous le curseur. Seul IE 10 et les
versions supérieures ont implémenté cette valeur Bur Windows :
bug 258960.
help
Le pointeur indique qu'une aide est disponible.
pointer
Le curseur est un pointeur qui indique un lien ; généralement c'est une
main.
progress
Le programme est occupé en arrière-plan mais l'utilisateur peut toujours
interagir avec l'interface (à la différence de wait).
wait
Le programme est occupé, empêchant toute interaction.
Sélection
cell
Le pointeur indique que la ou les cellules du tableau peuvent être
sélectionnées.
crosshair
Un curseur en forme de croix, généralement utilisé pour indiquer une
sélection sur une image.
text
Le pointeur indique que le texte peut être sélectionné.
vertical-text
Le pointeur indique que du texte vertical peut être sélectionné.
Glisser/déposer
alias
Le pointeur indique qu'un alias ou qu'un raccourci sera créé.
copy
Le pointeur indique que quelque chose devra être copié.
move
L'objet survolé devra être déplacé.
no-drop
Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit.
bug 275173
pour Windows et Mac OS X, « no-drop a le même effet que
not-allowed ».
grab
Le pointeur indique que le contenu peut être accroché/attrapé ou est
accroché/attrapé pour être glissé et déposé quelque part.
grabbing
not-allowed
Le curseur indique que quelque chose ne peut pas être fait.
Redimensionnement & défilement
all-scroll
Le curseur indique qu'on peut faire défiler le contenu dans n'importe
quelle direction.
Bug 275174
pour Windows, « all-scroll a le même effet que
move".
col-resize
L'élément ou la colonne peut être redimensionné horizontalement.
row-resize
L'élément ou la ligne peut être redimensionné verticalement.
n-resize
Un bord peut être déplacé. Par exemple, le curseur
se-resize peut être utilisé lorsqu'on redimensionne une
boîte à partir de son coin sud-est.
Dans certains environnements, un curseur bidirectionnel équivalent est
affiché (ex. n-resize et s-resize sont
synonymes de ns-resize).
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
Le pointeur indique un redimensionnement bidirectionnel.
ns-resize
nesw-resize
nwse-resize
Zoom
zoom-in
Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.
Bien que la spécification ne définisse aucune limite de taille pour les curseurs, chaque navigateur/agent utilisateur pourra imposer la sienne. Les images de curseur utilisées qui dépassent les limites prises en charge seront généralement ignorées.
Pour plus d'informations, voir le tableau de compatibilité ci-après.
.toto{cursor: crosshair;}/* On utilise la valeur préfixée *//* si "zoom-in" n'est pas prise en *//* charge */.truc{cursor: -webkit-zoom-in;cursor: zoom-in;}
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.