Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété cursor

Description.

Définit la forme du curseur de la souris lorsque celle-ci survole l'élément. Plusieurs valeurs peuvent être précisées en les séparant par des virgules : le navigateur utilise la première valeur qu'il reconnait.

Syntaxes pour cursor.

  • cursor: auto;

    Valeur par défaut. Le curseur est défini par le navigateur en fonction de l'endroit où se trouve la souris.

  • cursor: default;

    Curseur du système d'exploitation. En général une flèche inclinée.

  • cursor: none;

    Aucun curseur n'est affiché sur l'élément.

  • cursor: text;

    Curseur apparaissant en général sur du texte. Indique la possibilité de sélectionner du texte.

  • cursor: vertical-text;

    Curseur indiquant la possibilité de sélection verticale du texte.

  • cursor: cell;

    Curseur indiquant la possibilité de sélectionner une cellule.

  • cursor: crosshair;

    Curseur en forme d'une croix fine.

  • cursor: pointer;

    Pointeur fréquemment utilisé sur les liens ou les boutons.

  • cursor: wait;

    Curseur indiquant qu'un traitement est en cours (roue tournante, sablier, montre...).

  • cursor: progress;

    Ce curseur indique qu'un traitement est en cours mais sans empêcher l'utilisation de l'application.

  • cursor: help;

    Curseur indiquant qu'une aide est disponible sur cet élément.

  • cursor: context-menu;

    Curseur indiquant la présence d'un menu contextuel sur l'élément.

  • cursor: all-scroll;

    Curseur indiquant la possibilité de faire défiler l'élément, horizontalement et verticalement.

  • cursor: move;

    Curseur identique à all-scroll. N'est plus standardisé.

  • cursor: zoom-in;

    Curseur indiquant qu'il est possible de zoomer sur cet élément.

  • cursor: zoom-out;

    Curseur symétrique du précédent.

  • cursor: url(...) x y, url(...) x y, défaut;

    Curseur personnalisé défini par un fichier .png, .cur, .gif, etc. (tous les navigateurs n'acceptent pas les mêmes formats de fichier). Plusieurs ensembles url(...) x y peuvent être indiqués en les séparant par une virgule. Le navigateur utilise le premier fichier trouvé et correct.
    défaut est le curseur par défaut à utiliser si le fichier spécifié est introuvable ou incorrect. Cette valeur est obligatoire.
    x et y sont les coordonnées du point chaud, c'est à dire l'endroit précis du curseur où s'effectue le clic. Si ces valeurs ne sont pas précisées, elles sont fixées à 0 (le coin en haut à gauche du curseur).
    Les dimensions du curseur peuvent varier d'un navigateur à l'autre ou d'un système à l'autre.

  • background-size: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Curseurs spécifiques aux fonctions de glisser-déplacer.

  • cursor: grab;

    Indique que l'élément sur lequel se trouve la souris peut être saisi, par exemple en vue de son déplacement.

  • cursor: grabbing;

    Indique que l'élément est saisi (bouton de la souris enfoncé).

  • cursor: alias;

    Indique qu'un alias de l'élément peut ou va être créé.

  • cursor: copy;

    Indique que l'élément peut ou va être copié.

  • cursor: no-drop;

    Curseur indiquant qu'un élément ne peut pas être déposé ici.

  • cursor: not-allowed;

    Curseur indiquant une action interdite, en général que l'élément en cours de déplacement ne peut pas être déposé ici.

Curseurs spécifiques au dimensionnement.

  • cursor: col-resize;

    Curseur indiquant que la largeur d'une colonne peut être ajustée.

  • cursor: row-resize;

    Curseur indiquant que la hauteur d'une ligne peut être ajustée.

  • cursor: n-resize;

    Curseur indiquant la possibilité de dimensionner l'élément par le bord du haut (le nord).

  • cursor: ne-resize;

    Curseur indiquant la possibilité de dimensionner l'élément par le coin en haut à droite (le nord-est).

  • cursor: e-resize;

    Curseur indiquant la possibilité de dimensionner l'élément par le bord droit (l'est).

  • cursor: se-resize;

    Curseur indiquant la possibilité de dimensionner l'élément par le coin en bas à droite (le sud-est).

  • cursor: s-resize;

    Curseur indiquant la possibilité de dimensionner l'élément par le bord du bas (le Sud).

  • cursor: sw-resize;

    Curseur indiquant la possibilité de dimensionner l'élément par le coin en bas à gauche (le sud-ouest).

  • cursor: w-resize;

    Curseur indiquant la possibilité de dimensionner l'élément par le bord gauche (l'ouest ou West en anglais).

  • cursor: nw-resize;

    Curseur indiquant la possibilité de dimensionner l'élément par le coin en haut à gauche (le nord-ouest).

  • cursor: ew-resize;

    Curseur indiquant la possibilité de dimensionner l'élément par le coin en bas à droite (le sud-est).

  • cursor: ns-resize;

    Curseur indiquant la possibilité de dimensionner l'élément dans le sens vertical(nord-sud).

  • cursor: nwse-resize;

    Curseur indiquant la possibilité de dimensionner l'élément horizontalement et verticalement.

  • cursor: nesw-resize;

    Curseur indiquant la possibilité de dimensionner l'élément horizontalement et verticalement.

  • background-size: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Remarque : plusieurs de ces curseurs relatifs au dimensionnement sont identiques.

Simulateur.

cursor :
Déplacez le curseur de la souris sur ce bloc pour voir le curseur choisi.

Compatibilité en fonction des navigateurs.

Afficher les versions antérieures   Afficher la version à venir