Changer l'aspect du curseur en CSS

La propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web.
Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi.

Exemples

Exemple d'un style en forme de croix donné au curseur sur le "body" de votre page

body{
  cursor:crosshair;
}

On peut bien sûr donner des styles différents à plusieurs éléments de la même page
Exemple d'un style en forme de croix sur le "body" agrémenté d'un style en forme de sablier sur les images et de la main sur les liens.

body{
  cursor: crosshair;
}
img{
  cursor: wait;
}
a:link{
  cursor:  pointer;
}

Liste des attributs possibles de cette propriété

Voir également :
http://zonecss.free.fr/code_javascript_css/code_javascript_css_cursor.html

Acceptés par tous les navigateurs

• auto : Aspect identique à celui du curseur par défaut sur la balise qui possède l'attribut, ne change rien.
• default : Curseur par défaut du navigateur.
• pointer : Curseur en forme de main avec le doigt déplié.
• text : Curseur d'édition de texte.
• help : Curseur d'aide.
• wait : Curseur d'attente
• progress : Curseur de progression.
• move : Curseur de déplacement.
• crosshair : Curseur en forme de croix.

Curseurs de redimensionnement

• n-resize : Curseur de redimensionnement bas vers haut.
• s-resize : Curseur de redimensionnement haut vers bas.
• e-resize : Curseur de redimensionnement gauche vers droite.
• w-resize : Curseur de redimensionnement droite vers gauche.
• ne-resize : Curseur de redimensionnement bas-gauche vers haut-droite.
• nw-resize : Curseur de redimensionnement bas-droite vers haut-gauche.
• se-resize : Curseur de redimensionnement haut-gauche vers bas-droite.
• sw-resize : Curseur de redimensionnement haut-droite vers bas-gauche.

Note : En fait, il est très simple de se rappeler toutes ces propriétés d'un coup.
n, s, e, w correspondent à nord, sud, est, ouest, c'est-à-dire haut, bas, droite, gauche.
Il suffit d'indiquer la direction vers laquelle doit pointer le curseur, suivi bien sûr de "-resize".

Non accepté par tous les navigateurs

Firefox et Opera, entre autres, ignorent ces directives.

• inherit : Même curseur que la balise parente.
• not-allowed : Curseur en forme de rond barré.
• no-drop : Curseur en forme de main avec le doigt déplié et un rond barré.
• col-resize : Curseur fait de deux traits verticaux avec une flèche de chaque coté.
• row-resize : Curseur fait de deux traits horizontaux avec une flèche de chaque côté.