Using CSS you can change de default cursor icon related to a particular element.
This system is really powerful but you should apply these changes based on a particular custom
interface: it could be in fact counterproductive and irritating to the user.
The below table shows the different values for cursor element:
Icon
Value
Code
Browser
auto
based on the current context
all
default
style="cursor: default;"
all
hand
style="cursor: hand;"
IE
pointer
style="cursor: pointer;"
NS6/ IE6
hand & pointer
style="cursor: pointer; cursor: hand"
all
crosshair
style="cursor: crosshair;"
all
text
style="cursor: text;"
all
wait
style="cursor: wait;"
all
help
style="cursor: help;"
all
inherit
parent element's computed cursor value
all
move
style="cursor: move;"
all
e-resize
style="cursor: e-resize;"
all
ne-resize
style="cursor: ne-resize;"
all
nw-resize
style="cursor: nw-resize;"
all
n-resize
style="cursor: n-resize;"
all
se-resize
style="cursor: se-resize;"
all
sw-resize
style="cursor: sw-resize;"
all
s-resize
style="cursor: s-resize;"
all
w-resize
style="cursor: w-resize;"
all
progress
style="cursor: progress;"
IE6
all-scroll
style="cursor: all-scroll;"
IE6
col-resize
style="cursor: col-resize;"
IE6
no-drop
style="cursor: no-drop;"
IE6
not-allowed
style="cursor: not-allowed;"
IE6
row-resize
style="cursor: row-resize;"
IE6
url(uri)
style="cursor: url(myc.ico);"
(file .cur e .ani)
IE6
vertical-text
style="cursor: vertical-text;"
IE6
The below example shows instead move and help cursor types:
