|
Below lists all the available values for the CSS property "cursor" (as
of CSS2.1):
| Icon |
Value |
Live example (move mouse over
box) |
Browser |
| |
auto |
The User Agent determines the cursor to display
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;" |
Cross browser |
 |
crosshair |
style="cursor:
crosshair;" |
All |
 |
text |
style="cursor: text;" |
All |
 |
wait |
style="cursor: wait;" |
All |
 |
help |
style="cursor: help;" |
All |
| |
inherit |
Takes on its 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(mycursor.cur);"
Note: Only .cur and .ani file types are
supported as of IE6. |
IE6 |
 |
vertical-text |
style="cursor:
vertical-text;" |
IE6 |
Using the "cursor" property is like with any CSS property- simply apply
it to the desired element. Here are a few examples:
Example #1: <style type="text/css">
body{
cursor: url(mycursor.cur)
}
</style>
This changes the default arrow cursor of a webpage to a custom image
instead.
Example #2: <div style="cursor: move; width: 200px; height: 200px"></div>
<a href="help.htm" style="cursor: help;">Help</a> In this second example,
the entire DIV has a cursor of "move", and the link that follows, a
"help" cursor.
 Changing the cursor dynamically using JavaScript
As if the above isn't enough, you can change the cursor on the fly
using JavaScript (as with most CSS properties). Simply use the syntax:
element.style.cursor="new_cursor_value"
Example #3 (disable text selection on the page): This last
example disables text selection on the page in IE5+, and to make the
process more intuitive, changes the cursor to "not allowed" while the
user is dragging the mouse to try and select text:
<body onSelectStart="this.style.cursor='not-allowed'; return false;"
onMouseup="this.style.cursor='default'">
Simulated
example. Try dragging inside this DIV. IE5+ required.
And with that we come to an end of the tutorial.
|