CSS cursor
CSS Cursor
The CSS cursor property allows you to specify the type of cursor that should be displayed to the user.
A good use of this property is when using an image as a submit button on a form. By default, the cursor changes from a pointer to a hand when hovering over a link. However, the cursor does not change shape on a submit button on a form. Therefore, whenever someone hovers over an image that acts as a submit button, it provides a visual cue that the image is clickable.
The following table shows the possible values for the cursor property:
| Number | Value and Description |
|---|---|
| 1 | auto The cursor’s shape depends on the context in which it is located. For example, an I-beam on text, a hand on links, etc… |
| 2 | crosshair A crosshair or plus sign |
| 3 | default An arrow |
| 4 | pointer A pointing hand (hand in IE 4) |
| 5 | move An I-beam |
| 6 | e-resize The cursor indicates that the edge of the box needs to be moved right (east) by one. |
| 7 | ne-resize |
| 8 | nw-resize The cursor indicates that the edge of the box needs to be moved up and left (north/west). |
| 9 | n-resize The cursor indicates that the edge of the box needs to be moved up (north). |
| 10 | se-resize This cursor indicates that the edge of the box needs to be moved down and to the right (south/east). |
| 11 | sw-resize This cursor indicates that the edge of the box needs to be moved down and to the left (south/west). |
| 12 | s-resize This cursor indicates that the edge of the box needs to be moved down (south). |
| 13 | w-resize This cursor indicates that the edge of the box needs to be moved left (west). |
| 14 | text Vertical I-beam cursor |
| 15 | wait An hourglass |
| 16 | help A question mark or balloon, perfect for a help button |
| 17 | <url> Source of the cursor image file |
Note − You should try to only include helpful information where users expect to see the cursor. For example, using a crosshair when someone hovers over a link might confuse visitors.
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>
It will produce the following result −
