Changer l'aspect du curseur en CSS

Dernière mise à jour le 13 novembre 2009 à 15:52 par marlalapocket
Publié par RAD ZONE
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é.
Meilleures réponses pour « Changer l'aspect du curseur en CSS » dans :
Télécharger Theme Maker VoirPour obtenir de bons résultats, il faut travailler dans les meilleures conditions et un environnement de travail personnalisé. Theme Maker est un programme qui donne la possibilité de personnaliser, de créer ou de changer vos curseurs, vos icônes et...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...