Attribut cursor CSS

Définition et utilisation

La propriété cursor spécifie le type de curseur (forme) à afficher.

Cette propriété définit la forme du curseur utilisée lorsque le pointeur de la souris est placé à l'intérieur de la zone de bord d'un élément (bien que CSS2.1 ne définisse pas par quel bord cette zone est déterminée).

Voir également :

Tutoriel CSS :Positionnement CSS

Manuel de référence HTML DOM :Attribut cursor

Exemple

Différents curseurs :

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

Essayer personnellement

Syntaxe CSS

cursor: value;

Valeur de l'attribut

Valeur Description
url

URL du curseur personnalisé à utiliser.

Remarque :Définissez toujours un curseur standard à la fin de cette liste, au cas où il n'y aurait pas de curseur disponible défini par l'URL.
default Curseur par défaut (généralement une flèche).
auto Par défaut. Le curseur défini par le navigateur.
crosshair Le curseur est représenté par une croix.
pointer Le curseur est représenté par un pointeur indiquant un lien (une main).
move Ce curseur indique que l'objet peut être déplacé.
e-resize Ce curseur indique que les bords du cadre rectangulaire peuvent être déplacés vers la droite (est).
ne-resize Ce curseur indique que les bords du cadre rectangulaire peuvent être déplacés vers le haut et vers la droite (nord/est).
nw-resize Ce curseur indique que les bords du cadre rectangulaire peuvent être déplacés vers le haut et vers la gauche (nord/ouest).
n-resize Ce curseur indique que les bords du cadre rectangulaire peuvent être déplacés vers le haut (nord).
se-resize Ce curseur indique que les bords du cadre rectangulaire peuvent être déplacés vers le bas et vers la droite (sud/est).
sw-resize Ce curseur indique que les bords du cadre rectangulaire peuvent être déplacés vers le bas et vers la gauche (sud/ouest).
s-resize Ce curseur indique que les bords du cadre rectangulaire peuvent être déplacés vers le bas (sud).
w-resize Ce curseur indique que les bords du cadre rectangulaire peuvent être déplacés vers la gauche (ouest).
text Ce curseur indique du texte.
wait Ce curseur indique que le programme est occupé (généralement une horloge ou un sablier).
help Ce curseur indique que de l'aide est disponible (généralement un point d'interrogation ou une bulle).

Détails techniques

Valeur par défaut : auto
Héritabilité : oui
Version : CSS2
Syntaxe JavaScript : object.style.cursor="crosshair"

Exemple TIY

Changer le curseur
Cet exemple montre comment changer le curseur.

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
5.0 5.5 4.0 5.0 9.6

Remarque :Opera 9.3 et Safari 3 ne prennent pas en charge url valeur.