mouse cursor --from javascriptkit

Custom CSS Cursors

Using CSS, you can change the default cursor icon associated with a particular element, even specifying your own cursor image (in IE6+) instead. However, with power comes responsibility. Modify the cursor only when it makes sense to, such as when you're applying it to a custom interface. Like popup windows of JavaScript, changing cursors can quickly become counterproductive and irritating to the user.

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:



This changes the default arrow cursor of a webpage to a custom image instead.

Example #2:

Help

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:

onMouseup="this.style.cursor='default'">