cursor CSS propriété

Définition de la CSS cursor.

La propriété CSS cursor permet de spécifier la forme du curseur à utiliser sur un élément.
Le graphisme du curseur varie suivant les navigateurs, mais la signification curseur reste la même.

cursor : pointer;
cursor : move;
cursor : progress;
cursor : wait;
cursor : nw-resize;
cursor : no-drop;
cursor : url(/img/screenshot_css/cursor-x-y.png) 10 14, pointer

• auto : varie suivant l'élément survolé.
• nw-resize : curseur en forme de double petite flèche en diagonale bas droit vers haut gauche.
• crosshair : curseur en forme de croix fine.
• n-resize : curseur en forme de double petite flèche verticale.
• default : curseur en forme de grosse flèche.
• se-resize : curseur en forme de double petite flèche en diagonale bas droit vers haut gauche.
• pointer : curseur en forme de main avec un doigt déplié.
• sw-resize : curseur en forme de curseur en forme de double petite flèche en diagonale bas gauche vers haut droit.
• alias : curseur en forme de petite flèche avec une flèche incurvée au dessus.
• copy : curseur en forme de petite flèche avec un plus au dessus.
• move : curseur en forme de quatre flèches en croix.
• s-resize : curseur en forme de double petite flèche verticale.
• e-resize : curseur en forme de double petite flèche horizontale.
• w-resize : curseur en forme de double petite flèche horizontale.
• ne-resize : curseur en forme de double petite flèche en diagonale bas gauche vers haut droit.
• cell : curseur en forme de grosse croix avec un point au centre.
• text : curseur en forme de sorte de grand I.
• vertical-text : curseur en forme de sorte de grand I horizontal.
• help : curseur en forme de flèche et "?".
• wait : curseur en forme de sablier.
• inherit, la forme du curseur hérite de son parent.
• progress : curseur en forme de flèche avec sablier.
• not-allowed : curseur en forme de rond barré.
• no-drop : curseur en forme de main avec un doigt déplié avec 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 coté.
• none : pas de curseur.
• context-menu : curseur en forme de petite flèche avec un icône menu au dessus (rendu variable).

• - url(moncueseur.cur) : url de l'image non annimée, le format d'image accepté est identique à celui de background-image
  Le format ".cur" ou ".csr" pour l'image du curseur personnalisé est aussi accepté.
• X Y : coordonnées en px par rapport au coin haut gauche qui permet de décaler le curseur à l'affichage.
  Valeur facultative, si elle est omise sa valeur est "0 0"

cursor : url(/img/screenshot_css/cursor-x-y.png) 10 14, pointer

Exemple de code cursor CSS

Conditions d'application de la CSS cursor.

La propriété de feuille de style cursor CSS est applicable sur l'ensemble des balises HTML ou XHTML.

Problème d'interprétation de cursor en Css.

La propriété CSS cursor peut poser des problèmes d'interprétation sur certains mots clés comme context-menu, sur les coordonnées des curseurs personnalisés et sur le format de l'image. .cur semble fonctionner sous tous les navigateurs.