Propriété CSS cursor

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.