Using the CSS cursor property, a designer can change the style of the mouse cursor that is displayed on either a page or sections of a page or an individual element of the page.
Valid cusor styles include:
Quote:
auto
The UA determines the cursor to display based on the current context.
crosshair
A simple crosshair (e.g., short line segments resembling a "+" sign).
default
The platform-dependent default cursor. Often rendered as an arrow.
pointer
The cursor is a pointer that indicates a link.
move
Indicates something is to be moved.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.
text
Indicates text that may be selected. Often rendered as an I-beam.
wait
Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass. progressA progress indicator. The program is performing some processing, but is different from 'wait' in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass.
help
Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
|
In addition to the standard cursor styles, a designer can also request that the browser display custom cursors that are stored online.
Setting the cursor property as follows:
Quote:
|
:link,:visited { cursor: url(example.png#linkcursor), url(hyper.cur), pointer }
|
Will lead to the browser requesting example.png if it supports png cursors or hyper.cur if it does not and finally falling back to the default pointer cursor.