La propriété cursor définit l'apparence
du curseur lors du survol d'un élément.
Syntaxe
csssé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.