Propriété CSS cursor

La propriété cursor définit le type de curseur de la souris lorsque le pointeur de la souris se trouve au-dessus de l’élément.

Le curseur est défini par zéro ou plusieurs valeurs <url> séparées par des virgules, suivies d’une valeur mot-clé. Chacune de ces <url> doit indiquer un fichier image. Le navigateur utilisera l’image suivante s’il ne peut pas charger la première image spécifiée. Si le navigateur ne trouve aucune image, il utilisera la valeur mot-clé.

INFO

Les navigateurs modernes prennent en charge grab, grabbing, zoom-in et zoom-out sans préfixes de fournisseur.

Initial Value	auto
Applies to	Tous les éléments.
Inherited	Yes.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.cursor = "cell";

Syntaxe

Syntaxe de la propriété CSS cursor

css

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | <url> | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbing

Exemple de la propriété cursor :

Exemple de la propriété CSS cursor avec les valeurs auto et help

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .auto {
        cursor: auto;
      }
      .help {
        cursor: help;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Try it Yourself »

Voici un exemple avec toutes les valeurs de la propriété cursor. Les navigateurs modernes prennent en charge ces valeurs sans préfixes de fournisseur.

Exemple de la propriété cursor avec les valeurs "zoom-in", "zoom-out", "grab" et "grabbing" :

Exemple de la propriété CSS cursor avec toutes les valeurs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
      .auto {
        cursor: auto;
      }
      .default {
        cursor: default;
      }
      .none {
        cursor: none;
      }
      .context-menu {
        cursor: context-menu;
      }
      .help {
        cursor: help;
      }
      .pointer {
        cursor: pointer;
      }
      .progress {
        cursor: progress;
      }
      .wait {
        cursor: wait;
      }
      .cell {
        cursor: cell;
      }
      .crosshair {
        cursor: crosshair;
      }
      .text {
        cursor: text;
      }
      .vertical-text {
        cursor: vertical-text;
      }
      .alias {
        cursor: alias;
      }
      .copy {
        cursor: copy;
      }
      .move {
        cursor: move;
      }
      .no-drop {
        cursor: no-drop;
      }
      .not-allowed {
        cursor: not-allowed;
      }
      .all-scroll {
        cursor: all-scroll;
      }
      .col-resize {
        cursor: col-resize;
      }
      .row-resize {
        cursor: row-resize;
      }
      .n-resize {
        cursor: n-resize;
      }
      .e-resize {
        cursor: e-resize;
      }
      .s-resize {
        cursor: s-resize;
      }
      .w-resize {
        cursor: w-resize;
      }
      .ns-resize {
        cursor: ns-resize;
      }
      .ew-resize {
        cursor: ew-resize;
      }
      .ne-resize {
        cursor: ne-resize;
      }
      .nw-resize {
        cursor: nw-resize;
      }
      .se-resize {
        cursor: se-resize;
      }
      .sw-resize {
        cursor: sw-resize;
      }
      .nesw-resize {
        cursor: nesw-resize;
      }
      .nwse-resize {
        cursor: nwse-resize;
      }
      .grab {
        cursor: grab;
      }
      .grabbing {
        cursor: grabbing;
      }
      .zoom-in {
        cursor: zoom-in;
      }
      .zoom-out {
        cursor: zoom-out;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété cursor avec la valeur "url" :

Exemple de la propriété cursor avec l’url

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("https://fr.w3docs.com/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <i class="cursor">Icon</i>
  </body>
</html>

Try it Yourself »

Valeurs

Value	Description	Play it
auto	Cela signifie que le navigateur définira un curseur. C’est la valeur par défaut de cette propriété.	Play it »
default	C’est le curseur par défaut.	Play it »
none	Cela signifie qu’aucun curseur n’est rendu pour l’élément.	Play it »
context-menu	Le curseur indique qu’un menu contextuel est disponible.	Play it »
help	Le curseur indique qu’une aide est disponible.	Play it »
pointer	Le curseur indique un lien sous forme de pointeur.	Play it »
progress	Le curseur indique que le programme est occupé ou en cours d’exécution.	Play it »
wait	Le curseur indique que le programme est occupé.	Play it »
cell	Cela signifie que le curseur indiquera qu’une cellule ou un ensemble de cellules peut être sélectionné.	Play it »
crosshair	Le curseur sera affiché sous forme de réticule.	Play it »
text	Le curseur indique du texte qui peut être sélectionné.	Play it »
`<url>`	Une liste d’URL séparées par des virgules pour des curseurs personnalisés.	Play it »
vertical-text	Le curseur indique du texte vertical qui peut être sélectionné.	Play it »
alias	Cela signifie que le curseur indiquera qu’un alias de quelque chose doit être créé.	Play it »
copy	Le curseur indique quelque chose qui peut être copié.	Play it »
move	Le curseur indique que quelque chose peut être déplacé.	Play it »
no-drop	Le curseur indique que l’élément déplacé ne peut pas être déposé ici.	Play it »
not-allowed	Le curseur indique que l’action demandée ne sera pas exécutée.	Play it »
all-scroll	Cela signifie que le curseur indiquera qu’un élément peut être défilé dans n’importe quelle direction.	Play it »
col-resize	Le curseur indique que la colonne peut être redimensionnée horizontalement.	Play it »
row-resize	Le curseur indique que la ligne peut être redimensionnée verticalement.	Play it »
n-resize	Le curseur indique qu’un bord d’une boîte doit être déplacé vers le haut.	Play it »
s-resize	Le curseur indique qu’un bord d’une boîte doit être déplacé vers le bas.	Play it »
e-resize	Le curseur indique qu’un bord d’une boîte doit être déplacé vers la droite.	Play it »
w-resize	Le curseur indique qu’un bord d’une boîte doit être déplacé vers la gauche.	Play it »
ns-resize	Le curseur indique un curseur de redimensionnement bidirectionnel.	Play it »
ew-resize	Le curseur indique un curseur de redimensionnement bidirectionnel.	Play it »
ne-resize	Le curseur indique qu’un bord d’une boîte doit être déplacé vers le haut et la droite.	Play it »
nw-resize	Le curseur indique qu’un bord d’une boîte doit être déplacé vers le haut et la gauche.	Play it »
se-resize	Le curseur indique qu’un bord d’une boîte doit être déplacé vers le bas et la droite.	Play it »
sw-resize	Le curseur indique qu’un bord d’une boîte doit être déplacé vers le bas et la gauche.	Play it »
nesw-resize	Le curseur indique un curseur de redimensionnement bidirectionnel.	Play it »
nwse-resize	Le curseur indique un curseur de redimensionnement bidirectionnel.	Play it »
zoom-in	Le curseur indique que quelque chose peut être agrandi.	Play it »
zoom-out	Le curseur indique que quelque chose peut être réduit.	Play it »
grab	Le curseur indique que quelque chose peut être saisi.	Play it »
grabbing	Le curseur indique qu’un élément est en cours de déplacement.	Play it »
initial	Cela fait utiliser à la propriété sa valeur par défaut.	Play it »
inherit	Elle hérite la propriété de l’élément parent.

Practice

Que spécifie la propriété CSS 'cursor' dans la conception web ?

Elle spécifie le type de curseur à afficher lorsque l’on pointe sur un élément.Elle spécifie la couleur du curseur lorsque l’on pointe sur un élément.Elle spécifie la taille du curseur lorsque l’on pointe sur un élément.Elle affecte le comportement du curseur lors de l’interaction avec du texte ou des éléments graphiques.

Propriété CSS cursor ​

Syntaxe ​

Exemple de la propriété cursor : ​

Exemple de la propriété cursor avec les valeurs "zoom-in", "zoom-out", "grab" et "grabbing" : ​

Exemple de la propriété cursor avec la valeur "url" : ​

Valeurs ​

Practice ​

Propriété CSS cursor

Syntaxe

Exemple de la propriété cursor :

Exemple de la propriété cursor avec les valeurs "zoom-in", "zoom-out", "grab" et "grabbing" :

Exemple de la propriété cursor avec la valeur "url" :

Valeurs

Practice