cursor

This property determines how the cursor displays when passed over the affected element. The auto value leaves the display to be determined by the user agent, so the cursor will display according to either the browser default settings or the user settings. The crosshair value renders the cursor as a simple cross, whereas default displays the system's default cursor (usually an arrow). Various other values listed in the CSS2 specification can indicate that something is a link (pointer), that text can be selected (text), that something can be resized in various directions (e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize), or that the user must wait while a program is busy (wait). Table B-6 details the cursors supported in CSS2. The value url can be used to reference a cursor source; multiple cursor sources can be listed. As with fonts, the user agent should attempt to render the first cursor listed, try the second one if necessary, and ultimately default to the generic cursor value listed last.

Examples

.help {cursor: help;}
p.clickable {cursor: hand;} /* non-standard */
a:longload {cursor: wait;}
p {cursor:url("mything.cur"), url("second.cur"), text; }

Browser and CSS Support Notes

CSS2
IE 5, 5.5, 6
Nav 6, 7
Opera 7

TIP Internet Explorer 6 custom cursor support includes animated cursors. While custom cursors may not be supported in all browsers, a variety of JavaScript tricks are often employed to imitate this CSS2 property.

CSS Cursor Property Values	Description	Typical Rendering
auto	The browser determines the cursor to display based on the current context.	N/A
crosshair	A simple crosshair generally resembles a plus symbol.
default	The browser's default cursor is generally an arrow.
hand	A hand pointer (nonstandard but commonly supported).
move	This indicates something is to be moved; usually rendered as four arrows together.
e-resize	This indicates resizing as a double arrow pointing east-west (left-right).
ne-resize	This indicates resizing as a double arrow pointing northeast-southwest.
nw-resize	This indicates resizing as a double arrow pointing northwest-southeast.
n-resize	This indicates resizing as a double arrow pointing north-south.
pointer	Typically renders similar to the browser's default pointing cursor, which is generally a hand.
se-resize	This indicates resizing as a double arrow pointing southeast-northwest.
sw-resize	This indicates resizing as a double arrow pointing southwest-northeast.
s-resize	This indicates resizing as a double arrow pointing north-south.
w-resize	This indicates resizing as a double arrow pointing west-east.
text	This indicates text that may be selected or entered; generally rendered as an I-bar.
wait	This indicates that the page is busy; generally rendered as an hourglass.
help	This indicates that Help is available; the cursor is generally rendered as an arrow and a question mark.
table b-6