cursor
======

La propriété CSS **`cursor`** définit la forme du curseur (s'il y en a un) lorsque le pointeur est au-dessus de l'élément.

Exemple interactif
------------------

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
cursor: pointer;
cursor: auto;

/\* Une valeur d'URL avec un mot-clé par défaut \*/
cursor: url(hand.cur), pointer;

/\* Une valeur d'URL avec des coordonnées et un mot-clé par défaut \*/
cursor:
  url(cursor1.png) 4 12,
  auto;
cursor:
  url(cursor2.png) 2 2,
  pointer;

/\* Valeurs globales \*/
cursor: inherit;
cursor: initial;
cursor: unset;
```


La propriété `cursor` peut être définie grâce à zéro ou plusieurs valeurs `<url>` séparées par des virgules et suivi par un unique mot-clé obligatoire. Chaque `<url>` doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.

Chaque `<url>` peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) `<x><y>` Ces coordonnées permettent de paramétrer le point d'action (*hotspot*) du curseur par rapport au coin en haut à gauche de l'image.

Par exemple, on peut indiquer deux images grâce à deux valeurs `<url>` et fournir des coordonnées `<x><y>` pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé `progress` :


```css
cursor:
  url(one.svg),
  url(two.svg) 5 5,
  progress;
```

### Valeurs

`<url>`

Une `url(…)` ou une liste d'URL séparées par des virgules `url(…), url(…), …` pointant vers un fichier image. On peut utiliser plusieurs `url()`, au cas où certains types d'images ne sont pas pris en charge. Il est *obligatoire* qu'une valeur non-URL soit présente à la fin de cette liste.

`<x>` `<y>` 
Expérimental

Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.

Valeurs utilisant un mot-clé

**Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.**

| Catégorie | Valeur CSS | Rendu | Description |
| --- | --- | --- | --- |
| Général | `auto` |  | 
 Le navigateur détermine le curseur à afficher en fonction du contexte
 (par exemple, l'effet sera équivalent à `text` lors du survol
 du texte).
  |
| `default` | default.gif | 
 Le curseur par défaut de la plateforme (qui est généralement une
 flèche).
  |
| `none` |  | Aucun curseur n'est affiché. |
| Liens & états | `context-menu` | context-menu.png | 
 Un menu contextuel est disponible sous le curseur. Seul IE 10 et les
 versions supérieures ont implémenté cette valeur Bur Windows :
 bug 258960.
  |
| `help` | help.gif | Le pointeur indique qu'une aide est disponible. |
| `pointer` | pointer.gif | 
 Le curseur est un pointeur qui indique un lien ; généralement c'est une
 main.
  |
| `progress` | progress.gif | 
 Le programme est occupé en arrière-plan mais l'utilisateur peut toujours
 interagir avec l'interface (à la différence de `wait`).
  |
| `wait` | wait.gif | Le programme est occupé, empêchant toute interaction. |
| Sélection | `cell` | cell.gif | 
 Le pointeur indique que la ou les cellules du tableau peuvent être
 sélectionnées.
  |
| `crosshair` | crosshair.gif | 
 Un curseur en forme de croix, généralement utilisé pour indiquer une
 sélection sur une image.
  |
| `text` | text.gif | Le pointeur indique que le texte peut être sélectionné. |
| `vertical-text` | vertical-text.gif | Le pointeur indique que du texte vertical peut être sélectionné. |
| Glisser/déposer | `alias` | alias.gif | Le pointeur indique qu'un alias ou qu'un raccourci sera créé. |
| `copy` | copy.gif | Le pointeur indique que quelque chose devra être copié. |
| `move` | move.gif | L'objet survolé devra être déplacé. |
| `no-drop` | no-drop.gif | 
 Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit.
 bug 275173
 pour Windows et Mac OS X, « `no-drop` a le même effet que
 `not-allowed` ».
  |
| `grab` | grab.gif | 
 Le pointeur indique que le contenu peut être accroché/attrapé ou est
 accroché/attrapé pour être glissé et déposé quelque part.
  |
| `grabbing` | grabbing.gif |
| `not-allowed` | not-allowed.gif | Le curseur indique que quelque chose ne peut pas être fait. |
| Redimensionnement & défilement | `all-scroll` | all-scroll.gif | 
 Le curseur indique qu'on peut faire défiler le contenu dans n'importe
 quelle direction.
 Bug 275174
 pour Windows, « `all-scroll` a le même effet que
 `move`".
  |
| `col-resize` | col-resize.gif | L'élément ou la colonne peut être redimensionné horizontalement. |
| `row-resize` | row-resize.gif | L'élément ou la ligne peut être redimensionné verticalement. |
| `n-resize` | Exemple de redimensionnement vers le haut | 
 Un bord peut être déplacé. Par exemple, le curseur
 `se-resize` peut être utilisé lorsqu'on redimensionne une
 boîte à partir de son coin sud-est.


 Dans certains environnements, un curseur bidirectionnel équivalent est
 affiché (ex. `n-resize` et `s-resize` sont
 synonymes de `ns-resize`).
  |
| `e-resize` | Example of a resize towards the right cursor |
| `s-resize` | Example of a resize towards the bottom cursor  |
| `w-resize` | Example of a resize towards the left cursor |
| `ne-resize` | Example of a resize towards the top-right corner cursor |
| `nw-resize` | Example of a resize towards the top-left corner cursor |
| `se-resize` | Example of a resize towards the bottom-right corner cursor |
| `sw-resize` | Example of a resize towards the bottom-left corner cursor |
| `ew-resize` | 3-resize.gif | Le pointeur indique un redimensionnement bidirectionnel. |
| `ns-resize` | 6-resize.gif |
| `nesw-resize` | 1-resize.gif |
| `nwse-resize` | 4-resize.gif |
| Zoom | `zoom-in` | zoom-in.gif | Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu. |
| `zoom-out` | zoom-out.gif |

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié mais avec les valeurs `url` rendues absolues |
| Type d'animation | discrète |

Syntaxe formelle
----------------
```

cursor =   
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]    
  
<url> =   
  <url()>  |  
  <src()>    
  
<x> =   
  x    
  
<y> =   
  y    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Notes d'utilisation
-------------------

Bien que la spécification ne définisse aucune limite de taille pour les curseurs, chaque navigateur/agent utilisateur pourra imposer la sienne. Les images de curseur utilisées qui dépassent les limites prises en charge seront généralement ignorées.

Pour plus d'informations, voir le tableau de compatibilité ci-après.

Exemples
--------

### CSS


```css
.toto {
  cursor: crosshair;
}

/\* On utilise la valeur préfixée \*/
/\* si "zoom-in" n'est pas prise en \*/
/\* charge \*/
.truc {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
```

### HTML


```html
<p class="toto">On dirait qu'on pourrait sélectionner une zone.</p>

<p class="truc">Et là on peut zoomer.</p>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # cursor |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser des valeurs URL pour `cursor`
* `pointer-events`
* La fonction CSS `url()`