Voici quelques propriété pour le curseur
La propriété de feuille de style css cursor permet de spécifier la forme du curseur.
.identifiant{
cursor : nw-resize;
}
La propriéte de feuille de style cursor css peut prendre la valeur de :
- auto,
- nw-resize, curseur en forme de double petite flèche en diagonale bas droit vers haut gauche,
- crosshair, curseur en forme de croix fine,
- n-resize, curseur en forme de double petite flèche verticale,
- default, curseur en forme de grosse flèche,
- se-resize, curseur en forme de double petite flèche en diagonale bas droit vers haut gauche,
- pointer, curseur en forme de main avec un doigt déplié,
- sw-resize, curseur en forme de curseur en forme de double petite flèche en diagonale bas gauche vers haut droit,
- move curseur en forme de quatre flèches en croix,
- s-resize, curseur en forme de double petite flèche verticale,
- e-resize, curseur en forme de double petite flèche horizontale,
- w-resize, curseur en forme de double petite flèche horizontale,
- ne-resize, curseur en forme de double petite flèche en diagonale bas gauche vers haut droit,
- text, curseur en forme de sorte de grand I,
- help, curseur en forme de flèche et "?",
- wait, curseur en forme de sablier,
- inherit, la forme du curseur hérite de son parent
- progress, curseur en forme de flèche avec sablier,
- not-allowed, curseur en forme de rond barré,
- no-drop, curseur en forme de main avec un doigt déplié avec un rond barré,
- col-resize, curseur fait de deux traits verticaux avec une flèche de chaque coté.
- row-resize, curseur fait de deux traits horizontaux avec une flèche de chaque coté.
La propriété de feuille de style css cursor accepte pour Internet Explorer 6+ et Firefox un curseur personnalisé au format ".cur" ou ".csr".
- url(moncueseur.cur)
Codes en détailles:
- Code:
-
.identifiant{cursor:auto}
<div style="cursor:auto">auto</div>
.identifiant{cursor:nw-resize}
<div style="Cursor:nw-resize">nw-resize</div>
.identifiant{cursor:crosshair}
<div style="Cursor:crosshair">crosshair</div>
.identifiant{cursor:n-resize}
<div style="Cursor:n-resize">n-resize</div>
.identifiant{cursor:default}
<div style="Cursor:default">default</div>
.identifiant{cursor:se-resize}
<div style="cursor:se-resize">se-resize</div>
.identifiant{cursor:pointer}
<div style="cursor:pointer">pointer</div>
.identifiant{cursor:sw-resize}
<div style="cursor:sw-resize">sw-resize</div>
.identifiant{cursor:move}
<div style="cursor:move">move</div>
.identifiant{cursor:s-resize}
<div style="cursor:s-resize">s-resize</div>
.identifiant{cursor:e-resize}
<div style="cursor:e-resize">e-resize</div>
.identifiant{cursor:w-resize}
<div style="cursor:w-resize">w-resize</div>
.identifiant{cursor:ne-resize}
<div style="cursor:ne-resize">ne-resize</div>
.identifiant{cursor:text}
<div style="cursor:text">text</div>
.identifiant{cursor:help}
<div style="cursor:help">help</div>
.identifiant{cursor:wait}
<div style="cursor:wait">wait</div>
.identifiant{cursor:inherit}
<div style="cursor:inherit">inherit</div>
.identifiant{cursor:url(images/dmc.cur)}
<div style="cursor:url(../images/dmc.cur),auto">personnalise</div>
.identifiant{cursor:progress}
<div style="cursor:progress">progress</div>
.identifiant{cursor:not-allowed}
<div style="cursor:not-allowed">not-allowed</div>
.identifiant{cursor:no-drop}
<div style="cursor:no-drop">no-drop</div>
.identifiant{cursor:col-resize}
<div style="cursor:col-resize">col-resize</div>
.identifiant{cursor:row-resize}
<div style="cursor:row-resize">row-resize</div>