cursor

  • Raccourci de la révision : CSS/cursor
  • Titre de la révision : cursor
  • ID de la révision : 462873
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Oui
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS cursor définit le curseur de la souris à afficher lorsque le pointeur survole un élément.

{{cssbox("cursor")}}

Syntaxe

CSS 2.1

cursor:
[ [ {{ Xref_cssuri() }} ,]* 
  [ auto | crosshair | default | help | move | pointer  | progress | text | wait | e-resize | 
    ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize ] ]
] | inherit
CSS 3

cursor:
[ [ {{ Xref_cssuri() }} [<x> <y>]?,]* 
  [ auto | default | none | context-menu | help | pointer | progress | wait | cell | 
    crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 
    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 ]
] | inherit

Valeurs

<url> 
L'URL du curseur personnalisé. Plusieurs URL alternatives peuvent être renseignées, au cas où certains types d'images de curseur ne seraient pas supportés. Une alternative non URL (une des autres valeurs) doit être placée à la fin de la liste des alternatives. Pour plus d'informations, voir Utilisation d'URL pour la propriété cursor.
x y
coordonnée du centre par rapport au coin supérieur gauche (curseur personnalisé)
default
Curseur par défaut (généralement une flèche).
auto
Équivalente à text lorsque le curseur survole du texte et à default dans les autres cas.
crosshair
Curseur en croix, souvent utilisé pour indiquer une sélection dans un bitmap.
pointer
Curseur utilisé lors du survol des liens (généralement une main)
move
Curseur de déplacement.
e-resize
Curseur de redimensionnement d'une boîte par son bord droit.
ne-resize
Curseur de redimensionnement d'une boîte par son coin supérieur droit.
nw-resize
Curseur de redimensionnement d'une boîte par son coin supérieur gauche.
n-resize
Curseur de redimensionnement d'une boîte par son bord supérieur.
se-resize
Curseur de redimensionnement d'une boîte par son coin inférieur droit.
sw-resize
Curseur de redimensionnement d'une boîte par son coin inférieur gauche.
s-resize
Curseur de redimensionnement d'une boîte par son bord inférieur.
w-resize
Curseur de redimensionnement d'une boîte par son bord gauche.
text
Curseur indiquant que du texte peut être sélectionné (généralement un signe « I »).
wait
Curseur indiquant que le programme est occupé (sablier ou montre).
help
Curseur indiquant l'existence d'une aide.
progress
Curseur indiquant que le programme est occupé, mais que l'utilisateur peut toujours interagir avec lui (contrairement à busy)
copy
Curseur montrant quelque chose qui peut être copié.
alias
Curseur indiquant qu'un alias ou un raccourci va être créé.
context-menu
Curseur indiquant qu'un menu contextuel est disponible sous le curseur.
cell
Curseur indiquant que des cellules peuvent être sélectionnées.
not-allowed
Curseur indiquant qu'une action ne peut pas être effectuée.
col-resize
Curseur pour le redimensionnement horizontal des colonnes.
row-resize
Curseur pour le redimensionnement vertical des rangées.
no-drop
Curseur indiquant que la pose d'un élément n'est pas autorisé là où se trouve le curseur.
vertical-text
Curseur indiquant que du texte vertical peut être sélectionné (généralement un signe « I » couché).
all-scroll
Curseur montrant que quelque chose peut être parcouru dans toutes les direction (panoramique).
nesw-resize
Curseur de redimensionnement diagonal, dans les directions supérieure droite ou inférieure gauche.
nwse-resize
Curseur de redimensionnement diagonal, dans les directions supérieure gauche ou inférieure droite.
ns-resize
Curseur de redimensionnement vertical (haut ou bas).
ew-resize
Curseur de redimensionnement latéral (droite ou gauche).
none
Aucun curseur n'est utilisé {{ Fx_minversion_inline(3) }}

Exemples

{{ CSSRefExampleLink("cursor") }}

Inline:

<span style="cursor: crosshair">Some Text</span>

External:

.pointer {
	cursor: pointer;
}
.move {
	cursor: move;
}

Notes

Bien que cette propriété fonctionne dans les anciens navigateurs, toutes les valeurs ne sont pas totalement supportées.

Spécifications

Compatibilité des navigateurs

Navigateur Version minimale
Internet Explorer 4
Firefox 1.5
Netscape 6
Opera 7

Voir également

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>cursor</code> définit le curseur de la souris à afficher lorsque le pointeur survole un élément.</p>
<p>{{cssbox("cursor")}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox" style="white-space:pre-wrap">
CSS 2.1

cursor:
[ [ {{ Xref_cssuri() }} ,]* 
  [ auto | crosshair | default | help | move | pointer  | progress | text | wait | e-resize | 
    ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize ] ]
] | inherit
</pre>
<pre class="syntaxbox" style="white-space:pre-wrap">
CSS 3

cursor:
[ [ {{ Xref_cssuri() }} [&lt;x&gt; &lt;y&gt;]?,]* 
  [ auto | default | none | context-menu | help | pointer | progress | wait | cell | 
    crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 
    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 ]
] | inherit</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    &lt;url&gt;&nbsp;</dt>
  <dd>
    L'URL du curseur personnalisé. Plusieurs URL alternatives peuvent être renseignées, au cas où certains types d'images de curseur ne seraient pas supportés. Une alternative non URL (une des autres valeurs) doit être placée à la fin de la liste des alternatives. Pour plus d'informations, voir <a href="/fr/Utilisation_d'URL_pour_la_propriété_cursor" title="fr/Utilisation_d'URL_pour_la_propriété_cursor">Utilisation d'URL pour la propriété cursor</a>.</dd>
  <dt>
    <code>x y</code></dt>
  <dd>
    coordonnée du centre par rapport au coin supérieur gauche (curseur personnalisé)</dd>
  <dt>
    <code style="cursor: default;">default</code></dt>
  <dd>
    Curseur par défaut (généralement une flèche).</dd>
  <dt>
    <code style="cursor: auto;">auto</code></dt>
  <dd>
    Équivalente à <code>text</code> lorsque le curseur survole du texte et à <code>default</code> dans les autres cas.</dd>
  <dt>
    <code style="cursor: crosshair;">crosshair</code></dt>
  <dd>
    Curseur en croix, souvent utilisé pour indiquer une sélection dans un bitmap.</dd>
  <dt>
    <code style="cursor: pointer;">pointer</code></dt>
  <dd>
    Curseur utilisé lors du survol des liens (généralement une main)</dd>
  <dt>
    <code style="cursor: move;">move</code></dt>
  <dd>
    Curseur de déplacement.</dd>
  <dt>
    <code style="cursor: e-resize;">e-resize</code></dt>
  <dd>
    Curseur de redimensionnement d'une boîte par son bord droit.</dd>
  <dt>
    <code style="cursor: ne-resize;">ne-resize</code></dt>
  <dd>
    Curseur de redimensionnement d'une boîte par son coin supérieur droit.</dd>
  <dt>
    <code style="cursor: nw-resize;">nw-resize</code></dt>
  <dd>
    Curseur de redimensionnement d'une boîte par son coin supérieur gauche.</dd>
  <dt>
    <code style="cursor: n-resize;">n-resize</code></dt>
  <dd>
    Curseur de redimensionnement d'une boîte par son bord supérieur.</dd>
  <dt>
    <code style="cursor: se-resize;">se-resize</code></dt>
  <dd>
    Curseur de redimensionnement d'une boîte par son coin inférieur droit.</dd>
  <dt>
    <code style="cursor: sw-resize;">sw-resize</code></dt>
  <dd>
    Curseur de redimensionnement d'une boîte par son coin inférieur gauche.</dd>
  <dt>
    <code style="cursor: s-resize;">s-resize</code></dt>
  <dd>
    Curseur de redimensionnement d'une boîte par son bord inférieur.</dd>
  <dt>
    <code style="cursor: w-resize;">w-resize</code></dt>
  <dd>
    Curseur de redimensionnement d'une boîte par son bord gauche.</dd>
  <dt>
    <code style="cursor: text;">text</code></dt>
  <dd>
    Curseur indiquant que du texte peut être sélectionné (généralement un signe «&nbsp;I&nbsp;»).</dd>
  <dt>
    <code style="cursor: wait;">wait</code></dt>
  <dd>
    Curseur indiquant que le programme est occupé (sablier ou montre).</dd>
  <dt>
    <code style="cursor: help;">help</code></dt>
  <dd>
    Curseur indiquant l'existence d'une aide.</dd>
  <dt>
    <code style="cursor: progress;">progress</code></dt>
  <dd>
    Curseur indiquant que le programme est occupé, mais que l'utilisateur peut toujours interagir avec lui (contrairement à <code>busy</code>)</dd>
  <dt>
    <code style="cursor: copy;">copy</code></dt>
  <dd>
    Curseur montrant quelque chose qui peut être copié.</dd>
  <dt>
    <code style="cursor: alias;">alias</code></dt>
  <dd>
    Curseur indiquant qu'un alias ou un raccourci va être créé.</dd>
  <dt>
    <code style="cursor: context-menu;">context-menu</code></dt>
  <dd>
    Curseur indiquant qu'un menu contextuel est disponible sous le curseur.</dd>
  <dt>
    <code style="cursor: cell;">cell</code></dt>
  <dd>
    Curseur indiquant que des cellules peuvent être sélectionnées.</dd>
  <dt>
    <code style="cursor: not-allowed;">not-allowed</code></dt>
  <dd>
    Curseur indiquant qu'une action ne peut pas être effectuée.</dd>
  <dt>
    <code style="cursor: col-resize;">col-resize</code></dt>
  <dd>
    Curseur pour le redimensionnement horizontal des colonnes.</dd>
  <dt>
    <code style="cursor: row-resize;">row-resize</code></dt>
  <dd>
    Curseur pour le redimensionnement vertical des rangées.</dd>
  <dt>
    <code style="cursor: no-drop;">no-drop</code></dt>
  <dd>
    Curseur indiquant que la pose d'un élément n'est pas autorisé là où se trouve le curseur.</dd>
  <dt>
    <code style="cursor: vertical-text;">vertical-text</code></dt>
  <dd>
    Curseur indiquant que du texte vertical peut être sélectionné (généralement un signe «&nbsp;I&nbsp;» couché).</dd>
  <dt>
    <code style="cursor: all-scroll;">all-scroll</code></dt>
  <dd>
    Curseur montrant que quelque chose peut être parcouru dans toutes les direction (panoramique).</dd>
  <dt>
    <code style="cursor: nesw-resize;">nesw-resize</code></dt>
  <dd>
    Curseur de redimensionnement diagonal, dans les directions supérieure droite ou inférieure gauche.</dd>
  <dt>
    <code style="cursor: nwse-resize;">nwse-resize</code></dt>
  <dd>
    Curseur de redimensionnement diagonal, dans les directions supérieure gauche ou inférieure droite.</dd>
  <dt>
    <code style="cursor: ns-resize;">ns-resize</code></dt>
  <dd>
    Curseur de redimensionnement vertical (haut ou bas).</dd>
  <dt>
    <code style="cursor: ew-resize;">ew-resize</code></dt>
  <dd>
    Curseur de redimensionnement latéral (droite ou gauche).</dd>
  <dt>
    <code style="cursor: none;">none</code></dt>
  <dd>
    Aucun curseur n'est utilisé {{ Fx_minversion_inline(3) }}</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>{{ CSSRefExampleLink("cursor") }}</p>
<pre class="eval">
Inline:

&lt;span style="cursor: crosshair"&gt;Some Text&lt;/span&gt;

External:

.pointer {
	cursor: pointer;
}
.move {
	cursor: move;
}
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>Bien que cette propriété fonctionne dans les anciens navigateurs, toutes les valeurs ne sont pas totalement supportées.</p>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#propdef-cursor">CSS 2.1 (en)</a></li>
  <li><a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">css3-ui (en)</a></li>
</ul>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Navigateur</th>
      <th>Version minimale</th>
    </tr>
    <tr>
      <td>Internet Explorer</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Firefox</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>Netscape</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Opera</td>
      <td>7</td>
    </tr>
  </tbody>
</table>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
Revenir à cette révision