w3docs logo

Propriété CSS cursor

La propriété cursor est utilisée pour définir le type du curseur de la souris quand le pointeur de la souris est sur l'élément.

L'extension de la propriété -webkit- est ajoutée pour afficher quelques valeurs pour Safari, Google Chrome, et Opera (plus nouvelles versions).
Valeur initiale auto
Appliquée à Tous les éléments.
Héritée Oui.
Animable No.
Version CSS2
Syntaxe DOM object.style.cursor = "cell";

Syntaxe

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

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété cursor</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Voici un exemple avec tous les valeurs de la propriété cursor . Pour les valeurs "zoom-in", "zoom-out", "grab" et "grabbing", l'extension de la propriété -webkit- est ajoutée.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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: -webkit-grab; cursor: grab; }
      .grabbing {
      cursor:  -webkit-grabbing; cursor: grabbing; }
      .zoom-in { 
      cursor: -webkit-zoom-in; cursor: zoom-in; }
      .zoom-out {
      cursor:  -webkit-zoom-out; cursor: zoom-out; }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété cursor</h2>
    <p> Place le curseur de la souris sur l'élément pour voir les changements.</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>

Valeurs

Valeur Description
auto Cela signifie que le navigateur va définir un curseur. C'est la valeur initiale de cette propriété.
default C'est le curseur initiale.
none Cela signifie qu'il n'y a aucun curseur rendu pour l'élément.
context-menu Le curseur indique qu'un menu de contexte est disponible.
help Le curseur indique que l'aide est disponible.
pointer Le curseur indique un lien comme un pointeur.
progress Le curseur indique que le programme est occupé ou en cours.
wait Le curseur indique que le programme est occupé.
cell Cela signifie que le curseur indiquera qu'une cellule ou une collection des cellules peut être séléctée.
crosschair Le curseur sera rendu en réticule.
text Le curseur indique un texte qui peut être sélécté.
URL Une liste des URLs séparés par virgules aux curseurs spécials.
vertical-text Le curseur indique un texte vertical qui peut être sélécté.
allias Cela signifie que le curseur indiquera un faux nom de quelque chose qui va être créé.
copy Le curseur indique quelque chose qui peut être copié.
move Le curseur indique quelque chose qui peut être déplacé.
no-drop Le curseur indique que l'élément dragué ne peut pas être tombé ici.
not-allowed Le curseur indique que l'action demandée ne sera pas executée.
all-scroll Cela signifie que le curseur indique quelque chose qui peut être défilé vers n'importe quelle direction.
col-resize Le curseur indique que la colonne peut être redimensionnées horizontalement.
row-resize Le curseur indique que la rangée peut être redimensionnées verticalement.
n-resize Le curseur indique qu'un bord d'une boîte sera déplacé vers le haut.
s-resize Le curseur indique qu'un bord d'une boîte sera déplacé vers le bas.
e-resize Le curseur indique qu'un bord d'une boîte sera déplacé vers le droit.
w-resize Le curseur indique qu'un bord d'une boîte sera déplacé vers le gauche.
ns-resize Le curseur indique une redimension bidirectionnelle du curseur.
ew-resize Le curseur indique une redimension bidirectionnelle du curseur.
ne-resize Le curseur indique qu'un bord d'une boîte sera déplacé vers le haut et le droit.
nw-resize Le curseur indique qu'un bord d'une boîte sera déplacé vers le haut et le gauche.
se-resize Le curseur indique qu'un bord d'une boîte sera déplacé vers le bas et le droit.
sw-resize TLe curseur indique qu'un bord d'une boîte sera déplacé vers le bas et le gauche.
nesw-resize Le curseur indique une redimension bidirectionnelle du curseur.
nwse-resize Le curseur indique une redimension bidirectionnelle du curseur.
zoom-in Le curseur indique que quelque chose peut être zoomé.
zoom-out Le curseur indique que quelque chose peut être dézoomé.
grab Le curseur indique que quelque chose peut être saisi.
grabbing Le curseur indique que quelque chose peut être saisi.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.2+ 7.0+

Pratiquez vos connaissances

Quel est l’effet CSS du curseur 'wait' sur un élément de la page Web?
❮ Précédent Suivant ❯
Trouvez-vous cela utile?