Changer l'aspect du curseur ou pointeur en CSS

La propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web. Pour l'utiliser, il faut simplement appliquer le style CSS à l'élément désiré.

Note : Le curseur affiché correspond au type de curseur de l'ordinateur du client.

Icone Valeur Exemple(survolez les cases jaune)
cursor default default
style="cursor: default;"
cursor pointer pointer
style="cursor: pointer;"
cursor crosshair crosshair
style="cursor: crosshair;"
cursor text text
style="cursor: text;"
cursor wait wait
style="cursor: wait;"
cursor move move
style="cursor: move;"
cursor e-resize e-resize
style="cursor: e-resize;"
cursor ne-resize ne-resize
style="cursor: ne-resize;"
cursor nw-resize nw-resize
style="cursor: nw-resize;"
cursor n-resize n-resize
style="cursor: n-resize;"
cursor se-resize se-resize
style="cursor: se-resize;"
cursor sw-resize sw-resize
style="cursor: sw-resize;"
cursor s-resize s-resize
style="cursor: s-resize;"
cursor w-resize w-resize
style="cursor: w-resize;"
cursor progress progress
style="cursor: progress;"
cursor all-scroll all-scroll
style="cursor: all-scroll;"
cursor col-resize col-resize
style="cursor: col-resize;"
cursor no-drop no-drop
style="cursor: no-drop;"
cursor not-allowed not-allowed
style="cursor: not-allowed;"
cursor row-resize row-resize
style="cursor: row-resize;"
cursor vertical-text vertical-text
style="cursor: vertical-text;"
cursor help help
style="cursor: help;"

Pour se rappeler les propriétés de redimensionnement "**-resize", c'est simple : n, s, e, w correspondent aux 4 points cardinaux qui sont Nord, Sud, Est et Ouest. Il suffit d'indiquer la direction vers laquelle le curseur doit pointer, suivi de "-resize".

Note: Toutes ces propriétés ne sont pas acceptés par tous les navigateurs!

Exemple :

.bb{width:100%;
background:yellow;
cursor: move;
}
<div class="bb">
<a href="#" style="cursor: help;">Aide</a>
</div>

Résultat : survolez le lien et la case jaune

Voir/déposer un commentaire (0) | Signaler un problème