CSS Tutorial - CSS Cursors

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

I f 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.

T his 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: