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>