La propriété cursor définit l'apparence
du curseur lors du survol d'un élément.
Syntaxe
sélecteur {
cursor: valeur;
}
Remarque
La propriété a énormément de valeurs. Ci-dessous,
je les ai regroupées pour faciliter l'orientation.
L'apparence du curseur diffère selon les navigateurs,
c'est pourquoi je n'ai pas pris de photos des curseurs,
mais j'ai simplement ajouté une colonne spéciale dans les tableaux
de valeurs. En survolant la cellule de cette colonne avec la souris,
vous pourrez voir l'apparence du curseur décrit.
Valeurs
| Valeur |
Description |
Apparence |
default |
Apparence standard en forme de pointeur-flèche.
|
|
pointer |
Utilisé pour indiquer que l'élément est actif
et qu'on peut cliquer dessus (c'est le curseur par défaut pour les liens).
|
|
help |
Utilisé pour indiquer qu'une aide ou une question
est associée à l'élément.
|
|
not-allowed |
Utilisé pour indiquer l'interdiction d'une opération.
|
|
Texte
| Valeur |
Description |
Apparence |
text |
Curseur texte standard en forme de barre verticale.
|
|
vertical-text |
Curseur texte pour le texte vertical.
|
|
Attente
| Valeur |
Description |
Apparence |
progress |
Utilisé pour indiquer qu'une opération est en cours
et que l'utilisateur doit patienter.
|
|
wait |
Utilisé pour indiquer que l'utilisateur doit patienter.
|
|
Curseur pour le redimensionnement
Lors du redimensionnement d'un élément, la valeur
de la propriété est formée ainsi : le mot resize,
précédé par un tiret d'une ou plusieurs lettres,
par exemple : n-resize ou ne-resize.
Ces lettres sont les premières lettres des points cardinaux :
north - nord, south - sud, east - est, west - ouest.
Ici, on utilise les conventions adoptées pour les cartes géographiques :
le nord en haut, le sud en bas, l'ouest à gauche, l'est à droite.
Bien sûr, cela prête à confusion, mais il faudra s'en accommoder :)
Voici donc les valeurs :
| Valeur |
Direction |
Point cardinal |
Apparence |
n-resize |
vers le haut |
north |
|
ne-resize |
vers la droite et le haut |
nord est |
|
e-resize |
vers la droite |
east |
|
se-resize |
vers la droite et le bas |
south east |
|
s-resize |
vers le bas |
south |
|
sw-resize |
vers la gauche et le bas |
south west |
|
w-resize |
vers la gauche |
west |
|
nw-resize |
vers la gauche et le haut |
nord west |
|
nesw-resize |
vers la droite et le haut et vers la gauche et le bas |
nord east - south west |
|
nwse-resize |
vers la gauche et le haut et vers la droite et le bas |
nord west - south east |
|
Redimensionnement de deux éléments
| Valeur |
Description |
Apparence |
col-resize |
Redimensionnement horizontal. |
|
row-resize |
Redimensionnement vertical. |
|
Changement de zoom
| Valeur |
Description |
Apparence |
zoom-in |
Zoom avant. |
|
zoom-out |
Zoom arrière. |
|
Mouvement
| Valeur |
Description |
Apparence |
move |
Utilisé pour indiquer que l'élément peut être déplacé,
ou pendant son déplacement.
|
|
all-scroll |
Utilisé pour indiquer que l'élément peut être défilé
avec la souris dans toutes les directions.
|
|
Divers
| Valeur |
Description |
Apparence |
crosshair |
Apparence en forme de viseur.
|
|
cell |
Apparence en forme de viseur.
|
|
