We can manipulate cursor image for different elements in a HTML document by using the CSS cursor property.
Syntax
The syntax of CSS cursor property is as follows:
Selector {
cursor: /*value*/
}Following are the values for CSS cursor property −
| Sr.No | Value & Description |
|---|---|
| 1 | alias It indicates an alias of something is to be created |
| 2 | all-scroll It indicates that something can be scrolled in any direction |
| 3 | auto It is default and the browser sets a cursor |
| 4 | cell It indicates that a cell (or set of cells) may be selected |
| 5 | context-menu It indicates that a context-menu is available |
| 6 | col-resize It indicates that the column can be resized horizontally |
| 7 | copy It indicates something is to be copied |
| 8 | crosshair It renders as a crosshair |
| 9 | default It renders the default cursor |
| 10 | e-resize It indicates that an edge of a box is to be moved right (east) |
| 11 | ew-resize It indicates a bidirectional resize cursor |
| 12 | grab It indicates that something can be grabbed |
| 13 | grabbing It indicates that something can be grabbed |
| 14 | help It indicates that help is available |
| 15 | move It indicates something is to be moved |
| 16 | n-resize It indicates that an edge of a box is to be moved up (north) |
| 17 | ne-resize It indicates that an edge of a box is to be moved up and right (north/east) |
| 18 | nesw-resize It indicates a bidirectional resize cursor |
| 19 | ns-resize It indicates a bidirectional resize cursor |
| 20 | nw-resize It indicates that an edge of a box is to be moved up and left (north/west) |
| 21 | nwse-resize It indicates a bidirectional resize cursor |
| 22 | no-drop It indicates that the dragged item cannot be dropped here |
| 23 | none No cursor is rendered for the element |
| 24 | not-allowed It indicates that the requested action will not be executed |
| 25 | pointer It is a pointer and indicates a link |
| 26 | progress It indicates that the program is busy (in progress) |
| 27 | row-resize It indicates that the row can be resized vertically |
| 28 | s-resize It indicates that an edge of a box is to be moved down (south) |
| 29 | se-resize It indicates that an edge of a box is to be moved down and right (south/east) |
| 30 | sw-resize It indicates that an edge of a box is to be moved down and left (south/west) |
| 31 | text It indicates text that may be selected |
| 32 | URL A comma separated list of URLs to custom cursors with a generic cursor mentioned at the end as a fail safe |
| 33 | vertical-text It indicates vertical-text that may be selected |
| 34 | w-resize It indicates that an edge of a box is to be moved left (west) |
| 35 | wait It indicates that the program is busy |
| 36 | zoom-in It indicates that something can be zoomed in |
| 37 | zoom-out It indicates that something can be zoomed out |
| 38 | initial It sets cursor property to its default value. |
| 39 | inherit It It inherits cursor property from its parent element. |
The following is an example to implement CSS cursor property
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 5px;
float: left;
}
#one {
background-color: beige;
}
#two {
background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>Output
