cursor

  • Raccourci de la révision : CSS/cursor
  • Titre de la révision : cursor
  • ID de la révision : 85445
  • Créé :
  • Créateur : Mgjbot
  • Version actuelle ? Non
  • Commentaire robot Ajoute: [[es:CSS:cursor]] <<langbot>>

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété {{ Cssxref("cursor") }} définit le curseur de la souris à afficher lorsque le pointeur survole un élément.

Syntaxe

cursor: [ {{ mediawiki.external('<url> ,') }}</url>* {{ mediawiki.external(' auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | copy | alias | context-menu | cell | not-allowed | col-resize | row-resize | no-drop | vertical-text | all-scroll | nesw-resize | nwse-resize | ns-resize | ew-resize | none') }} ] | {{ Cssxref("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.
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

Interwiki Languages Links

{{ languages( { "en": "en/CSS/cursor", "es": "es/CSS/cursor", "pl": "pl/CSS/cursor" } ) }}

Source de la révision

<p> {{ CSSRef() }}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>La propriété {{ Cssxref("cursor") }} définit le curseur de la souris à afficher lorsque le pointeur survole un élément.
</p>
<ul><li> <a href="fr/CSS/Valeur_initiale">Valeur initiale</a> : auto
</li><li> S'applique à : tous les éléments
</li><li> <a href="fr/CSS/H%c3%a9ritage">Héritée</a> : oui
</li><li> Pourcentages : N/A
</li><li> Média : <a href="fr/CSS/M%c3%a9dia/Visuel">Visuel</a>, <a href="fr/CSS/M%c3%a9dia/Interactif">Interactif</a>
</li><li> <a href="fr/CSS/Valeur_calcul%c3%a9e">Valeur calculée</a> : comme spécifié (avec les URL relatives converties en URL absolues).
</li></ul>
<h3 name="Syntaxe"> Syntaxe </h3>
<p><code>cursor:</code> [ {{ mediawiki.external('<url> ,') }}</url>* {{ mediawiki.external(' <code>auto</code> | <code>crosshair</code> | <code>default</code> | <code>pointer</code> | <code>move</code> | <code>e-resize</code> | <code>ne-resize</code> | <code>nw-resize</code> | <code>n-resize</code> | <code>se-resize</code> | <code>sw-resize</code> | <code>s-resize</code> | <code>w-resize</code> | <code>text</code> | <code>wait</code> | <code>help</code> | <code>progress</code> | <code>copy</code> | <code>alias</code> | <code>context-menu</code> | <code>cell</code> | <code>not-allowed</code> | <code>col-resize</code> | <code>row-resize</code> | <code>no-drop</code> | <code>vertical-text</code> | <code>all-scroll</code> | <code>nesw-resize</code> | <code>nwse-resize</code> | <code>ns-resize</code> | <code>ew-resize</code> | <code>none</code>') }} ] | {{ Cssxref("inherit") }}
</p>
<h3 name="Valeurs"> Valeurs </h3>
<dl><dt> &lt;url&gt; </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%c3%a9t%c3%a9_cursor">Utilisation d'URL pour la propriété cursor</a>.
</dd><dt> <code>default</code> </dt><dd> Curseur par défaut (généralement une flèche).
</dd><dt> <code>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>crosshair</code> </dt><dd> Curseur en croix, souvent utilisé pour indiquer une sélection dans un bitmap.
</dd><dt> <code>pointer</code> </dt><dd> Curseur utilisé lors du survol des liens (généralement une main)
</dd><dt> <code>move</code> </dt><dd> Curseur de déplacement.
</dd><dt> <code>e-resize</code> </dt><dd> Curseur de redimensionnement d'une boîte par son bord droit.
</dd><dt> <code>ne-resize</code> </dt><dd> Curseur de redimensionnement d'une boîte par son coin supérieur droit.
</dd><dt> <code>nw-resize</code> </dt><dd> Curseur de redimensionnement d'une boîte par son coin supérieur gauche.
</dd><dt> <code>n-resize</code> </dt><dd> Curseur de redimensionnement d'une boîte par son bord supérieur.
</dd><dt> <code>se-resize</code> </dt><dd> Curseur de redimensionnement d'une boîte par son coin inférieur droit.
</dd><dt> <code>sw-resize</code> </dt><dd> Curseur de redimensionnement d'une boîte par son coin inférieur gauche.
</dd><dt> <code>s-resize</code> </dt><dd> Curseur de redimensionnement d'une boîte par son bord inférieur.
</dd><dt> <code>w-resize</code> </dt><dd> Curseur de redimensionnement d'une boîte par son bord gauche.
</dd><dt> <code>text</code> </dt><dd> Curseur indiquant que du texte peut être sélectionné (généralement un signe « I »).
</dd><dt> <code>wait</code> </dt><dd> Curseur indiquant que le programme est occupé (sablier ou montre).
</dd><dt> <code>help</code> </dt><dd> Curseur indiquant l'existence d'une aide.
</dd><dt> <code>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>copy</code> </dt><dd> Curseur montrant quelque chose qui peut être copié.
</dd><dt> <code>alias</code> </dt><dd> Curseur indiquant qu'un alias ou un raccourci va être créé.
</dd><dt> <code>context-menu</code> </dt><dd> Curseur indiquant qu'un menu contextuel est disponible sous le curseur.
</dd><dt> <code>cell</code> </dt><dd> Curseur indiquant que des cellules peuvent être sélectionnées.
</dd><dt> <code>not-allowed</code> </dt><dd> Curseur indiquant qu'une action ne peut pas être effectuée.
</dd><dt> <code>col-resize</code> </dt><dd> Curseur pour le redimensionnement horizontal des colonnes.
</dd><dt> <code>row-resize</code> </dt><dd> Curseur pour le redimensionnement vertical des rangées.
</dd><dt> <code>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>vertical-text</code> </dt><dd> Curseur indiquant que du texte vertical peut être sélectionné (généralement un signe « I » couché).
</dd><dt> <code>all-scroll</code> </dt><dd> Curseur montrant que quelque chose peut être parcouru dans toutes les direction (panoramique).
</dd><dt> <code>nesw-resize</code> </dt><dd> Curseur de redimensionnement diagonal, dans les directions supérieure droite ou inférieure gauche.
</dd><dt> <code>nwse-resize</code> </dt><dd> Curseur de redimensionnement diagonal, dans les directions supérieure gauche ou inférieure droite.
</dd><dt> <code>ns-resize</code> </dt><dd> Curseur de redimensionnement vertical (haut ou bas).
</dd><dt> <code>ew-resize</code> </dt><dd> Curseur de redimensionnement latéral (droite ou gauche).
</dd><dt> <code>none</code> </dt><dd> Aucun curseur n'est utilisé {{ Fx_minversion_inline("3") }}
</dd></dl>
<h3 name="Exemples"> Exemples </h3>
<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>
<p><br>
</p>
<h3 name="Notes"> Notes </h3>
<p>Bien que cette propriété fonctionne dans les anciens navigateurs, toutes les valeurs ne sont pas totalement supportées.
</p>
<h3 name="Sp.C3.A9cifications"> Spécifications </h3>
<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>
<h3 name="Compatibilit.C3.A9_des_navigateurs"> Compatibilité des navigateurs </h3>
<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>
<h3 name="Voir_.C3.A9galement"> Voir également </h3>
<p><span class="comment">Interwiki Languages Links</span>
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/CSS/cursor", "es": "es/CSS/cursor", "pl": "pl/CSS/cursor" } ) }}
Revenir à cette révision