Cursor values

Useful CSS

The mouse pointer, or more formally the icon indicating the spatial position on the screen canvas of whichever pointing device the operating system offers, also known as the cursor, can be manipulated to give special meaning to an element. The syntax is no different than changing the colour. The user experience may however be significantly distinctive and interactive, since the effect is only apparent when the mouse is actually over the element. The following paragraph illustrates this.

The CSS2 Specification
n/a	auto		default
	text		pointer
	wait		progress
	move		crosshair
	help	n/a	inherit
	n-resize		ne-resize
	e-resize		se-resize
	s-resize		sw-resize
	w-resize		nw-resize
	url(...)

The CSS2 Specification defines 19 possible values for the cursor property. They are listed in the table on the right, and are supported in browsers from version IE 4.0, Netscape 6.0, Opera 7.0, Mozilla 1.0 and Firefox 1.0. IE6 and all other browsers render the resize icons as two-sided arrows, but the example illustrations are from IE5.5.

Notes

auto specifies the usual cursor for the current item, ie. the element that is currently under the mouse, be it text, an image or scrollbar. If no value is specified, it is auto.
default is the normal cursor, usually a little white arrow pointing to the upper left.
inherit instructs conformation to the cursor value of the parent element. It is not supported by IE and Opera.
Internet Explorer up to version 5.5 misinterprets the standard value of pointer, but instead uses hand which no other browser (except Opera 3.5) recognizes. Since later declarations override earlier ones in the cascade, the style, to work cross-browser, should be expressed in this order:
```
<tag style="cursor: pointer; cursor: hand;">
```
progress was added in CCS2.1 dd. 25 February 2004, to indicate the user may continue interacting with the browser while a task is being completed. Usually rendered as a marriage of the default and wait cursors, browser support begins with IE 6.0, Netscape 7.2 Mozilla 1.7, Firefox 1.0 and Opera 7.2.
url() is supported by IE 6.0 and later and accepts an url to a .cur or .ani file as the value of the cursor style property. Thus it is possible to specify an image as the cursor. Hover over this note to see the effect. The example shows how alternatives may be offered as a comma-separated list, to facilitate browsers that don't support custom cursors:
```
<tag style="cursor: url(/image/icon/cursor/volcanoe.ani), text;">
```

Browser additions

IE6
Internet Explorer Additions
all-scroll vertical-text
col-resize row-resize
no-drop not-allowed
additionally offers some special cursors, listed on the right. They may cause great confusion when used inappropriately. vertical-text is indeed the default cursor for vertically displayed text.
Netscape Navigator 6 also introduced some extra cursors: alias, cell, copy, grab, grabbing, pointer and spinning.

	all-scroll			vertical-text
	col-resize			row-resize
	no-drop			not-allowed