Accueil    CSS    Propriété cursor
 



style css cursor  Style CSS cursor

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété cursor permet de définir l'apparence qu'aura le pointeur de la souris lorsqu'il survolera l'élément html décrit par cette propriété. L'exemple le plus connu est le curseur en forme de main lorsque l'utilisateur passe sur un lien hypertexte.

De façon générale, les curseurs sont appliqués au survol des éléments, mais il est également possible de les déclarer sur des actions plus spécifique comme par exemple des déplacements.

Voici un rendu basique des différents curseurs :

curseurs



Propriétés pour le style cursor :




Propriété Définition Valeurs CSS
cursor Détermine l'apparence du curseur de la souris auto, all-scroll,
col-resize, crosshair,
default, e-resize
help, move, n-resize,
ne-resize, nw-resize,
no-drop,not-allowed,
pointer, progress,
row-resize, s-resize,
se-resize, sw-resize,
text, vertical-text,
w-resize, wait
CSS 2


Exemple d'utilisation du style css cursor :





Sélectionnez le type de curseur à appliquer au survol de l'élément :
<select onchange="ChangeCursorStyle(this.options[this.selectedIndex].value);">
   <option>auto</option>
   <option>all-scroll</option>
   ...
   <option>w-resize</option>
   <option>wait</option>
</select>


Visualisez le rendu du curseur au survol de l'élément ci-dessous :

<div id="BlocExemple" style="border:solid 1px black; width:500px; height:80px;">
</div>

le javascript associé est le suivant :

<script type="text/javascript">
function ChangeCursorStyle(valeur){
   document.getElementById('BlocExemple').innerHTML = 'curseur : ' + valeur;
   document.getElementById('BlocExemple').style.cursor = valeur;
}
</script>



Sélectionnez le type de curseur à appliquer au survol de l'élément :

Visualisez le rendu du curseur au survol de l'élément ci-dessous :