Skip to main content

Visit Mozilla.org

CSS:cursor

Un article de MDC.

« Référence CSS

[modifier] Résumé

La propriété cursor définit le curseur de la souris à afficher lorsque le pointeur survole un élément.

[modifier] Syntaxe

cursor: [ [<url> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | copy | alias | context-menu | cell | not-allowed | col-resize | row-resize | no-drop | vertical-text | all-scroll | nesw-resize | nwse-resize | ns-resize | ew-resize | none] ] | inherit

[modifier] Valeurs

<url> 
L'URL du curseur personnalisé. Plusieurs URL alternatives peuvent être renseignées, au cas où certains types d'images de curseur ne seraient pas supportés. Une alternative non URL (une des autres valeurs) doit être placée à la fin de la liste des alternatives. Pour plus d'informations, voir Utilisation d'URL pour la propriété cursor.
default 
Curseur par défaut (généralement une flèche).
auto 
Équivalente à text lorsque le curseur survole du texte et à default dans les autres cas.
crosshair 
Curseur en croix, souvent utilisé pour indiquer une sélection dans un bitmap.
pointer 
Curseur utilisé lors du survol des liens (généralement une main)
move 
Curseur de déplacement.
e-resize 
Curseur de redimensionnement d'une boîte par son bord droit.
ne-resize 
Curseur de redimensionnement d'une boîte par son coin supérieur droit.
nw-resize 
Curseur de redimensionnement d'une boîte par son coin supérieur gauche.
n-resize 
Curseur de redimensionnement d'une boîte par son bord supérieur.
se-resize 
Curseur de redimensionnement d'une boîte par son coin inférieur droit.
sw-resize 
Curseur de redimensionnement d'une boîte par son coin inférieur gauche.
s-resize 
Curseur de redimensionnement d'une boîte par son bord inférieur.
w-resize 
Curseur de redimensionnement d'une boîte par son bord gauche.
text 
Curseur indiquant que du texte peut être sélectionné (généralement un signe « I »).
wait 
Curseur indiquant que le programme est occupé (sablier ou montre).
help 
Curseur indiquant l'existence d'une aide.
progress 
Curseur indiquant que le programme est occupé, mais que l'utilisateur peut toujours interagir avec lui (contrairement à busy)
copy 
Curseur montrant quelque chose qui peut être copié.
alias 
Curseur indiquant qu'un alias ou un raccourci va être créé.
context-menu 
Curseur indiquant qu'un menu contextuel est disponible sous le curseur.
cell 
Curseur indiquant que des cellules peuvent être sélectionnées.
not-allowed 
Curseur indiquant qu'une action ne peut pas être effectuée.
col-resize 
Curseur pour le redimensionnement horizontal des colonnes.
row-resize 
Curseur pour le redimensionnement vertical des rangées.
no-drop 
Curseur indiquant que la pose d'un élément n'est pas autorisé là où se trouve le curseur.
vertical-text 
Curseur indiquant que du texte vertical peut être sélectionné (généralement un signe « I » couché).
all-scroll 
Curseur montrant que quelque chose peut être parcouru dans toutes les direction (panoramique).
nesw-resize 
Curseur de redimensionnement diagonal, dans les directions supérieure droite ou inférieure gauche.
nwse-resize 
Curseur de redimensionnement diagonal, dans les directions supérieure gauche ou inférieure droite.
ns-resize 
Curseur de redimensionnement vertical (haut ou bas).
ew-resize 
Curseur de redimensionnement latéral (droite ou gauche).
none 
Aucun curseur n'est utilisé Nouveau dans Firefox 3

[modifier] Exemples

Voir des exemples en ligne (en) 

Inline:

<span style="cursor: crosshair">Some Text</span>

External:

.pointer {
	cursor: pointer;
}
.move {
	cursor: move;
}


[modifier] Notes

Bien que cette propriété fonctionne dans les anciens navigateurs, toutes les valeurs ne sont pas totalement supportées.

[modifier] Spécifications

[modifier] Compatibilité des navigateurs

Navigateur Version minimale
Internet Explorer 4
Firefox 1.5
Netscape 6
Opera 7

[modifier] Voir également

Récupérée de « http://developer.mozilla.org/fr/docs/CSS:cursor »