CSS Cursors
The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user. 

The browsers typically display the mouse pointer over any blank part of a web page, the gloved hand over any linked or clickable item and the edit cursor over any text or text field. With CSS you can redefine those properties to display a variety of different cursors.

The following table shows the possible values for the cursor properties:
   Value          Description
auto The browser determines the cursor to display based on the current context. For example, an 'I' over text, a 'hand' over a link, and so on.
default The default cursor for the platform, without regard for the context, typically an arrow.
context-menu Indicates that a context-menu is available.
crosshair A crosshair or plus sign
pointer A pointing hand (in IE 4 this value is hand).
progress A progress indicator. The program is performing some processing but the user can still interact with the interface (unlike for wait).
move The 'I' bar
text The I bar.
wait An hour glass.
help A question mark or balloon, ideal for use over help buttons.
cell Indicates that a cell (or set of cells) can be selected.
alias Indicates that an alias or shortcut is to be created.
copy Indicates that something can be copied.
not-allowed Indicates that something cannot be done.
e-resize The cursor indicates that an edge of a box is to be moved right (east).
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east).
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west).
n-resize The cursor indicates that an edge of a box is to be moved up (north).
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east).
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west).
s-resize The cursor indicates that an edge of a box is to be moved down (south).
w-resize The cursor indicates that an edge of a box is to be moved left (west).
zoom-in Indicates that something can be zoomed in.
zoom-out Indicates that something can be zoomed out.
CSS Cursors
<!DOCTYPE html>  
<html>  
<head>
<title>CSS Cursors</title>
 
<style type="text/css">
   .my_cursors{ height:400px; overflow-y:scroll; padding:0px 20px;}
</style>
 
</head>
<body>
 
<div class="my_cursors">
 
<h4>CSS Cursors :</h4>
 
<p style="cursor:auto">Auto</p>
<p style="cursor:default">Default</p>
<p style="cursor:context-menu">Context-menu</p>
<p style="cursor:crosshair">Crosshair</p>
<p style="cursor:pointer">Pointer</p>
<p style="cursor:progress">Progress</p>
<p style="cursor:move">Move</p>
<p style="cursor:text">text</p>
<p style="cursor:wait">wait</p>
<p style="cursor:help">help</p>
<p style="cursor:cell">Cell</p>
<p style="cursor:alias">Alias</p>
<p style="cursor:copy">Copy</p>
<p style="cursor:not-allowed">Not-allowed</p>
<p style="cursor:e-resize">e-resize</p>
<p style="cursor:ne-resize">ne-resize</p>
<p style="cursor:nw-resize">nw-resize</p>
<p style="cursor:n-resize">n-resize</p>
<p style="cursor:se-resize">se-resize</p>
<p style="cursor:sw-resize">sw-resize</p>
<p style="cursor:s-resize">s-resize</p>
<p style="cursor:w-resize">w-resize</p>
<p style="cursor:zoom-in">Zoom-in</p>
<p style="cursor:zoom-out">Zoom-out</p>
 
</div>
 
</body>
</html> 
Output :

CSS Cursors :

Auto

Default

Context-menu

Crosshair

Pointer

Progress

Move

text

wait

help

Cell

Alias

Copy

Not-allowed

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

Zoom-in

Zoom-out