CSS : Propriété cursor - Gestion du curseur de la souris

La propriété cursor permet de modifier la forme du pointeur de la souris.

Voici un petit mémo pour l'utilisation de cette propriété.

Utilisation

Il faut indiquer une valeur pour la propriété cursor, la syntaxe à respecter est : cursor: valeur;

Le curseur peut prendre différentes formes qui peuvent légèrement changer suivant la configuration du pc de l'utilisateur (personnalisation, thème spécifique, etc...)

Exemple :

<div style="cursor: help;">cursor: help;</div>

Les principales formes

Type	Forme	Valeur	Exemple
Croix		crosshair	cursor: crosshair;
Aide		help	cursor: help;
Main		pointer	cursor: pointer;
Standard		default	cursor: default;
Déplacement		move	cursor: move;
Zone de texte		text	cursor: text;
Patientez		wait	cursor: wait;
Curseur + patientez		progress	cursor: progress;
Interdit (*)		not-allowed	cursor: not-allowed;
Curseur + interdit (*)		no-drop	cursor: no-drop;

* : N'est pas W3C, ne fonctionne pas sous Opéra.

Curseur personnel

Vous pouvez attribuer une image (.cur ou .ani) comme curseur en utilisant la syntaxe suivante :

cursor:url("test.cur"), auto;

Curseurs de redimensionnement

Type	Forme	Valeur	Exemple
Direction nord		n-resize	cursor: n-resize;
Direction nord-est		ne-resize	cursor: ne-resize;
Direction ouest		w-resize	cursor: w-resize;
Direction nord-ouest		nw-resize	cursor: nw-resize;
Direction sud		s-resize	cursor: s-resize;
Direction sud-est		se-resize	cursor: se-resize;
Direction est		e-resize	cursor: e-resize;
Direction sud-ouest		sw-resize	cursor: sw-resize;
Redimensionnement de colonne (IE)		col-resize	cursor: col-resize;
Redimensionnement de ligne (IE)		row-resize	cursor: row-resize;

Posté le 06-02-2011