/ Code Css cursor | Résultat du code Css cursor | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la propriété CSS cursor.

<style type="text/css">
.cursor-auto{  : auto}
.cursor-nw-resize{  : nw-resize  }
.cursor-crosshair{  : crosshair }
.cursor-n-resize{  : n-resize }
.cursor-default{ cursor : default }
.cursor-se-resize{ cursor : se-resize }
.cursor-pointer{ cursor : pointer }
.cursor-sw-resize{ cursor : sw-resize }
.cursor-move{ cursor : move }
.cursor-s-resize{ cursor : s-resize }
.cursor-w-resize{ cursor : w-resize }
.cursor-ne-resize{ cursor : ne-resize }
.cursor-text{ cursor : text }
.cursor-help{ cursor : help }
.cursor-wait{ cursor : wait }
.cursor-personnalise{ cursor : url(/img/screenshot_css/dmc.cur),auto }
.cursor-inherit{ cursor : inherit }
.cursor-personnalise2{ cursor : url(/img/screenshot_css/cursor-x-y.png) 10 14, pointer }
.cursor-personnalise3{ cursor : url(/img/screenshot_css/cursor-x-y.png) 45 45, pointer }
.cursor-personnalise4{ cursor : url(/img/screenshot_css/cursor-x-y.tif) 45 45, url(/img/screenshot_css/cursor-x-y.png) 45 45, pointer  }
.cursor-personnalise5{ cursor : url(/img/screenshot_css/cursor-404.png), pointer }
.cursor-progress{ cursor : progress }
.cursor-not-allowed{ cursor : not-allowed }
.cursor-no-drop{ cursor : no-drop }
.cursor-col-resize{ cursor : col-resize }
.cursor-row-resize{ cursor : row-resize }
.cursor-cell{ cursor : cell }
.cursor-vertical-text{ cursor : vertical-text }
.cursor-alias{ cursor : alias }
.cursor-copy{ cursor : copy }
.cursor-context-menu{ cursor : context-menu }
/* charte */
#coderesult div{ margin-bottom : 5px }
</style>
Mettez votre curseur sur la valeur, pour voir la forme du curseur.<br>
.identifiant{ cursor : auto }
<div class="cursor-auto">Curseur auto</div>
.identifiant{ cursor : nw-resize }
<div class="cursor-nw-resize">Curseur nw-resize</div>
.identifiant{ cursor : crosshair }
<div class="cursor-crosshair">Curseur crosshair</div>
.identifiant{ cursor : n-resize }
<div class="cursor-n-resize">Curseur n-resize</div>
.identifiant{ cursor : default }
<div class="cursor-default">Curseur default</div>
.identifiant{ cursor : se-resize }
<div class="cursor-se-resize">Curseur se-resize</div>
.identifiant{ cursor : pointer }
<div class="cursor-pointer">Curseur pointer</div>
.identifiant{ cursor : sw-resize }
<div class="cursor-sw-resize">Curseur sw-resize</div>
.identifiant{ cursor : move }
<div class="cursor-move">Curseur move</div>
.identifiant{ cursor : s-resize }
<div class="cursor-s-resize">Curseur s-resize</div>
.identifiant{ cursor : e-resize }
<div class="cursor-e-resize">Curseur e-resize</div>
.identifiant{ cursor : w-resize }
<div class="cursor-w-resize">Curseur w-resize</div>
.identifiant{ cursor : ne-resize }
<div class="cursor-ne-resize">Curseur ne-resize</div>
.identifiant{ cursor : text }
<div class="cursor-text">Curseur text</div>
.identifiant{ cursor : help }
<div class="cursor-help">Curseur help</div>
.identifiant{ cursor : wait }
<div class="cursor-wait">Curseur wait</div>
.identifiant{ cursor : inherit }
<div class="cursor-inherit">Curseur inherit</div>
.identifiant{ cursor : url(/img/screenshot_css/dmc.cur), auto }
<div class="cursor-personnalise">Curseur personnalisé</div>
.identifiant{ cursor : url(/img/screenshot_css/cursor-x-y.png) 10 14, pointer }
<div class="cursor-personnalise2">Curseur personnalisé png 10 14, pointer </div>
.identifiant{ cursor : url(/img/screenshot_css/cursor-x-y.png) 45 45, pointer }
<div class="cursor-personnalise3">Curseur personnalisé png 45 45, pointer </div>
.identifiant{ cursor : cursor:url(/img/screenshot_css/cursor-x-y.tif) 45 45, url(/img/screenshot_css/cursor-x-y.png) 45 45, pointer }
<div class="cursor-personnalise4">Curseur personnalisé png 45 45, pointer </div>
.identifiant{ cursor : cursor:url(/img/screenshot_css/cursor-404.png), pointer }
<div class="cursor-personnalise5">Curseur personnalisé qui n'existe pas </div>
.identifiant{ cursor : progress }
<div class="cursor-progress">Curseur progress</div>
.identifiant{ cursor : not-allowed }
<div class="cursor-not-allowed">Curseur not-allowed</div>
.identifiant{ cursor : no-drop }
<div class="cursor-no-drop">Curseur no-drop</div>
.identifiant{ cursor : col-resize }
<div class="cursor-col-resize">Curseur col-resize</div>
.identifiant{ cursor : row-resize }
<div class="cursor-row-resize">Curseur row-resize</div>
.identifiant{ cursor : cell }
<div class="cursor-cell">Curseur cell</div>
.identifiant{ cursor : vertical-text }
<div class="cursor-vertical-text">Curseur vertical-text</div>
.identifiant{ cursor : alias }
<div class="cursor-alias">Curseur alias</div>
.identifiant{ cursor : copy}
<div class="cursor-copy">Curseur copy</div>
.identifiant{ cursor : context-menu}
<div class="cursor-context-menu">Curseur context-menu</div>

Interprétation du code de la propriété cursor CSS par votre navigateur.

Mettez votre curseur sur la valeur, pour voir la forme du curseur.
.identifiant{ cursor : auto }
Curseur auto
.identifiant{ cursor : nw-resize }
Curseur nw-resize
.identifiant{ cursor : crosshair }
Curseur crosshair
.identifiant{ cursor : n-resize }
Curseur n-resize
.identifiant{ cursor : default }
Curseur default
.identifiant{ cursor : se-resize }
Curseur se-resize
.identifiant{ cursor : pointer }
Curseur pointer
.identifiant{ cursor : sw-resize }
Curseur sw-resize
.identifiant{ cursor : move }
Curseur move
.identifiant{ cursor : s-resize }
Curseur s-resize
.identifiant{ cursor : e-resize }
Curseur e-resize
.identifiant{ cursor : w-resize }
Curseur w-resize
.identifiant{ cursor : ne-resize }
Curseur ne-resize
.identifiant{ cursor : text }
Curseur text
.identifiant{ cursor : help }
Curseur help
.identifiant{ cursor : wait }
Curseur wait
.identifiant{ cursor : inherit }
Curseur inherit
.identifiant{ cursor : url(/img/screenshot_css/dmc.cur), auto }
Curseur personnalisé
.identifiant{ cursor : url(/img/screenshot_css/cursor-x-y.png) 10 14, pointer }
Curseur personnalisé png 10 14, pointer
.identifiant{ cursor : url(/img/screenshot_css/cursor-x-y.png) 45 45, pointer }
Curseur personnalisé png 45 45, pointer
.identifiant{ cursor : cursor:url(/img/screenshot_css/cursor-x-y.tif) 45 45, url(/img/screenshot_css/cursor-x-y.png) 45 45, pointer }
Curseur personnalisé png 45 45, pointer
.identifiant{ cursor : cursor:url(/img/screenshot_css/cursor-404.png), pointer }
Curseur personnalisé qui n'existe pas
.identifiant{ cursor : progress }
Curseur progress
.identifiant{ cursor : not-allowed }
Curseur not-allowed
.identifiant{ cursor : no-drop }
Curseur no-drop
.identifiant{ cursor : col-resize }
Curseur col-resize
.identifiant{ cursor : row-resize }
Curseur row-resize
.identifiant{ cursor : cell }
Curseur cell
.identifiant{ cursor : vertical-text }
Curseur vertical-text
.identifiant{ cursor : alias }
Curseur alias
.identifiant{ cursor : copy}
Curseur copy
.identifiant{ cursor : context-menu}
Curseur context-menu

Interprétation normale du code de la propriété CSS cursor (copie d'écran).

copie d'écran de l'affichage de la propriété CSS cursor