Custom Mouse Cursor

CSS gives the cursor property to control the type of cursor to be shown for a particular element. Different mouse cursor indicate to users when they can perform certain actions like re-sizing or dragging elements.

The Cursor Property – It specifies the type of cursor to be displayed when pointing on an element. Various values are given as

Icon	Value	CSS Code
	default	style=”cursor: default;”
	hand	style=”cursor: hand;”
	pointer	style=”cursor: pointer;”
	hand & pointer	style=”cursor: pointer; cursor: hand;”
	crosshair	style=”cursor: crosshair;”
	text	style=”cursor: text;”
	wait	style=”cursor: wait;”
	help	style=”cursor: help;”
	move	style=”cursor: move;”
	e-resize	style=”cursor: e-resize;”
	ne-resize	style=”cursor: ne-resize;”
	nw-resize	style=”cursor: nw-resize;”
	n-resize	style=”cursor: n-resize;”
	se-resize	style=”cursor: se-resize;”
	sw-resize	style=”cursor: sw-resize;”
	s-resize	style=”cursor: s-resize;”
	w-resize	style=”cursor: w-resize;”
	progress	style=”cursor: progress;”
	all-scroll	style=”cursor: all-scroll;”
	col-resize	style=”cursor: col-resize;”
	no-drop	style=”cursor: no-drop;”
	not-allowed	style=”cursor: not-allowed;”
	row-resize	style=”cursor: row-resize;”
	url(uri)	style=”cursor: url(mycursor.cur);”
	vertical-text	style=”cursor: vertical-text;”

It is used as

span.crosshair {cursor:crosshair}

span.help {cursor:help}

span.wait {cursor:wait}

The cursor property has the ‘default’ value as its default value. Some browsers do not support *-resize and -scroll keyword.

Custom Pointers – By using the URL value custom cursors can be specified based on an image in CSS as

body{

cursor: url(mycursor.cur) }

Hovering over triggers a different cursor as given for the associated class.

Go To- Certified CSS3 Developer Tutorial