CSS Cursors

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

One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changes from a pointer to a hand. However, it does not change form for a submit button on a form. Therefore, whenever someone hovers over an image that is a submit button, it provides a visual clue that the image is clickable.

The following table shows the possible values for the cursor property −

Serial Numbers	Values	Descriptions
1	auto	Shape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on...
2	crosshair	A crosshair or plug sign.
3	default	An arrow.
4	pointer	A pointing hand (in IE 4 this value is hand).
5	move	The I bar.
6	e-resize	The cursor indicates that an edge of a box is to be moved right (east).
7	ne-resize	The cursor indicates that an edge of a box is to be moved up and right (north/east).
8	nw-resize	The cursor indicates that an edge of a box is to be moved up and left (north/west).
9	n-resize	The cursor indicates that an edge of a box is to be moved up (north).
10	se-resize	The cursor indicates that an edge of a box is to be moved down and right (south/east)
11	sw-resize	The cursor indicates that an edge of a box is to be moved down and left (south/west)
12	s-resize	The cursor indicates that an edge of a box is to be moved down (south)
13	w-resize	The cursor indicates that an edge of a box is to be moved left (west)
14	text	The I bar
15	wait	An hour glass
16	help	A question mark or balloon, ideal for use over help buttons
17	<b><</b>url>	The source of a cursor image file

Here is an example -

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>