CSS : Chaging cursor styles

By changing the value of cursor, you can change the appearance of the cursor. Cursor may have one of the following values.

• auto
• crosshair
• default
• help
  
• move
• pointer
• progress
• text
• wait
  

Move mouse over the lines below to see how the cursors look !

Cursor auto

When the value of cursor is set to auto, browser determines what style to show depending upon the context. i.e. if it sees
a link, it shows a pointer (a hand), default otherwise.

Cursor crosshair

Cursor help

Cursor default

Cursor move

Cursor pointer

Cursor progress

Cursor text

Cursor wait

Changing cursor styles with CSS adds great functionality to web pages. This can also be done in JavaScript. For Rich Web Applications (that use XMLHttpRequest for speed and better interaction), it's a good idea to change the cursor style to 'wait' after sending request to the server so that user expects some response from the server to be seen somewhere in the web page.

Following line sets cursor style to wait.

document.body.style.cursor="wait";

After loading completely the response from the server, the style may again be set to default.