CSS Cursor Properties Tutorial | netbax

Html copy reset

Netbax Online Editor Try it Yourself

<style>
span{font-weight:bold}
x1{color:#c00}
</style>
<center><b>Demo: <x1>Mouse Hover Me</x1></b></center>
<div style="position:absolute;top:60px;left:20px">
<span style="cursor: auto;">auto</span><br><br>
<span style="cursor: default;">default</span><br><br>
<span style="cursor: none;">none</span><br><br>
<span style="cursor: context-menu;">context-menu</span><br><br>
<span style="cursor: help;">help</span><br><br>
<span style="cursor: pointer;">pointer</span><br><br>
<span style="cursor: progress;">progress</span><br><br>
<span style="cursor: wait;">wait</span><br><br>
<span style="cursor: cell;">cell</span><br><br>
<span style="cursor: crosshair;">crosshair</span><br><br>
<span style="cursor: text;">text</span><br><br>
<span style="cursor: vertical-text;">vertical-text</span><br><br></div>
<div style="position:absolute;top:60px;left:260px">
<span style="cursor: alias;">alias</span><br><br>
<span style="cursor:copy;">copy</span><br><br>
<span style="cursor: move;">move</span><br><br>
<span style="cursor: no-drop;">no-drop</span><br><br>
<span style="cursor: not-allowed;">not-allowed</span><br><br>
<span style="cursor: grab;">grab</span><br><br>
<span style="cursor: grabbing;">grabbing</span><br><br>
<span style="cursor:e-resize">e-resize</span><br><br>
<span style="cursor: n-resize;">n-resize</span><br><br>
<span style="cursor: ne-resize;">ne-resize</span><br><br>
<span style="cursor: nw-resize;">nw-resize</span><br><br>
<span style="cursor: s-resize;">s-resize</span><br><br></div>
<div style="position:absolute;top:60px;right:20px">
<span style="cursor: se-resize;">se-resize</span><br><br>
<span style="cursor: sw-resize;">sw-resize</span><br><br>
<span style="cursor: w-resize;">w-resize</span><br><br>
<span style="cursor: ew-resize;">ew-resize</span><br><br>
<span style="cursor: ns-resize;">ns-resize</span><br><br>
<span style="cursor: nesw-resize;">nesw-resize</span><br><br>
<span style="cursor: nwse-resize;">nwse-resize</span><br><br>
<span style="cursor: col-resize;">col-resize</span><br><br>
<span style="cursor: row-resize;">row-resize</span><br><br>
<span style="cursor: all-scroll;">all-scroll</span><br><br>
<span style="cursor: zoom-in;">zoom-in</span><br><br>
<span style="cursor: zoom-out;">zoom-out</span><br><br></div>