CSS cursor property
CSS cursor property
Description
The cursor property is used to play sound behind the element’s audio device.
Possible Values
The following table shows the possible values of the cursor attribute:
| Number | Value and Description |
|---|---|
| 1 | auto The cursor shape depends on the context area. For example, an “I” appears above text, a hand icon appears above links, and so on… |
| 2 | crosshair A crosshair or plus sign |
| 3 | default An arrow |
| 4 | pointer A pointing hand icon (hand in IE 4) |
| 5 | move An I-shaped icon |
| 6 | e-resize The cursor indicates to move the edge of the box one square to the right (east). |
| 7 | ne-resize |
| 8 | nw-resize The cursor indicates to move the edge of the box up and left (north/west). |
| 9 | n-resize The cursor indicates to move the edge of the box up (north). |
| 10 | se-resize Cursor indicates to move the edge of the box down and to the right (South/East) |
| 11 | sw-resize Cursor indicates to move the edge of the box down and to the left (South/West) |
| 12 | s-resize Cursor indicates to move the edge of the box down (South) |
| 13 | w-resize Cursor indicates to move the edge of the box to the left (West) |
| 14 | text I-beam cursor |
| 15 | wait Hourglass icon |
| 16 | help Question mark or balloon, suitable for use on a help button |
| 17 | <url> Source of the cursor image file |
Note − You should strive to use these values only to add useful information to the user and where users expect to see a cursor. For example, using a crosshair when someone hovers over a link might confuse visitors.
Apply to
All HTML elements.
DOM syntax
object.style.cueAfter = url("music.wav");
Example
This is an example:
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style= "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>
This will produce the following results. Try moving your mouse pointer over different attributes –
