CSS CURSORS

Changing the Look of Cursor

The browsers typically display the mouse pointer over any blank part of a web page, the gloved hand over any linked or clickable item and the edit cursor over any text or text field. With CSS you can redefine those properties to display a variety of different cursors.

EXAMPLE

1.	h1 {
2.	    cursor: move;
3.	}
4.	p {
5.	    cursor: text;
6.	}

The table below demonstrates the different cursors that most browsers will accept. Place your mouse pointer over the “TEST” link in the output column to reveal that cursor.

Look  ValuesExample
defaulta:hover{cursor:default;}
pointera:hover{cursor:pointer;}
texta:hover{cursor:text;}
waita:hover{cursor:wait;}
helpa:hover{cursor:help;}
progressa:hover{cursor:progress;}
crosshaira:hover{cursor:crosshair;}
movea:hover{cursor:move;}
url()a:hover{cursor:url("custom.cur"), default;}

Creating a Customized Cursor

It is also possible to have completely customized cursors.

The cursor property handles a comma-separated list of user-defined cursors values followed by the generic cursor. If the first cursor is specified incorrectly or can’t be found, the next cursor in the comma-separated list will be used, and so on until a usable cursor is found.

If none of the user-defined cursors is valid or supported by the browser, the generic cursor at the end of the list will be used instead.

EXAMPLE

1.	a {
2.	    cursor: url("custom.gif"), url("custom.cur"), default;
3.	}

In the above example custom.gif and custom.cur is the custom cursor file, uploaded to your server space, and default is the generic cursor that will be used if the custom cursor is missing, or isn’t supported by the viewer’s browser.

Categories: CSS