CURSOR PROPERTIES

 

Look Values Look NS IE Example   default TEST 6+ 4+ cursor:default   crosshair TEST 6+ 4+ cursor:crosshair   hand TEST   4+ cursor:hand   pointer TEST 6+   cursor:pointer   Cross browser TEST   4+ cursor:pointer;cursor:hand     move TEST 6+ 4+ cursor:move   text TEST 6+ 4+ cursor:text   wait TEST 6+ 4+ cursor:wait   help TEST 6+ 4+ cursor:help   n-resize TEST 6+ 4+ cursor:n-resize   ne-resize TEST 6+ 4+ cursor:ne-resize   e-resize TEST 6+ 4+ cursor:e-resize   se-resize TEST 6+ 4+ cursor:se-resize   s-resize TEST 6+ 4+ cursor:s-resize   sw-resize TEST 6+ 4+ cursor:sw-resize   w-resize TEST 6+ 4+ cursor:w-resize   nw-resize TEST 4+ 4+ cursor:nw-resize   progress TEST   6+ cursor:progress   not-allowed TEST   6+ cursor:not-allowed   no-drop TEST   6+ cursor:no-drop   vertical-text TEST   6+ cursor:vertical-text   all-scroll TEST   6+ cursor:all-scroll   col-resize TEST   6+ cursor:col-resize   row-resize TEST   6+ cursor:row-resize   cursor:url(uri) TEST   6+ cursor:url(uri)

ADDING A CUSTOMIZED CURSOR

The syntax for a customized cursor is this:
(Position the mouse over each link to see the effect)

Selector {cursor:value}

For example:

 

REDEFINING THE CURSOR FOR ENTIRE PAGES

If you want to redefine the cursor so that it's not only showing up when moved over a link, you simply specify the desired cursor using the body-selector.

For example:

 

REDEFINING THE CURSOR FOR AREAS ON A PAGE

If you want one look of the cursor in one area of the page and another look of the cursor in another area you can do it with context dependant selectors.

This way, you create different styles for links, that are dependant on the context. Now if the context is set with a dummy tag, such as <span> you don't have to specify the desired style each and every time there is a link in the section.

For example: