Different Types of Cursors in CSS
CSS cursor property is used to change the cursor type when the mouse pointer is over an element. Cursors are used to specify possible actions that can be performed on an element.
For example when you hover over a link, the cursor changes to a hand. This is because the cursor property is set to pointer.
| Default property: | auto |
| Version: | CSS 2,3 |
| Animation: | no |
| Applies to: | all element |
| Inherited: | Yes |
Different Types of Cursor Values
There are many different types of cursor values. Take your mouse pointer over these buttons and see how the pointer changes.
Following table shows the cursor property values and their corresponding cursors.
| Value | Cursor (hover your mouse on buttons below) |
|---|---|
| auto | auto |
| default | default |
| none | none |
| initial | initial |
| inherit | inherit |
| context-menu | context-menu |
| help | help |
| pointer | pointer |
| progress | Progress |
| wait | wait |
| cell | cell |
| crosshair | crosshair |
| text | text |
| vertical-text | vertical-text |
| alias | alias |
| copy | copy |
| move | move |
| no-drop | no-drop |
| not-allowed | not-allowed |
| all-scroll | all-scroll |
| col-resize | col-resize |
| row-resize | row-resize |
| n-resize | n-resize |
| e-resize | e-resize |
| s-resize | s-resize |
| w-resize | w-resize |
| ne-resize | ne-resize |
| nw-resize | nw-resize |
| se-resize | se-resize |
| sw-resize | sw-resize |
| ew-resize | ew-resize |
| ns-resize | ns-resize |
| nesw-resize | nesw-resize |
| nwse-resize | nwse-resize |
| zoom-in | zoom-in |
| zoom-out | zoom-out |
| grab | grab |
| grabbing | grabbing |
Here is an example:
Example
<span style=cursor:auto;>auto</span>
<span style=cursor:default;>default</span>
<span style=cursor:none;>none</span>
<span style=cursor:initial;>initial</span>
<span style=cursor:inherit;>inherit</span>
<span style=cursor:context-menu;>context-menu</span>
<span style=cursor:help;>help</span>
<span style=cursor:pointer;>pointer</span>
<span style=cursor:progress;>progress</span>
<span style=cursor:wait;>wait</span>
<span style=cursor:cell;>cell</span>
<span style=cursor:crosshair;>crosshair</span>
<span style=cursor:text;>text</span>
<span style=cursor:vertical-text;>vertical-text</span>
<span style=cursor:alias;>alias</span>
<span style=cursor:copy;>copy</span>
<span style=cursor:move;>move</span>
<span style=cursor:no-drop;>no-drop</span>
<span style=cursor:not-allowed;>not-allowed</span>
<span style=cursor:all-scroll;>all-scroll</span>
<span style=cursor:col-resize;>col-resize</span>
<span style=cursor:row-resize;>row-resize</span>
<span style=cursor:n-resize;>n-resize</span>
<span style=cursor:e-resize;>e-resize</span>
<span style=cursor:s-resize;>s-resize</span>
<span style=cursor:w-resize;>w-resize</span>
<span style=cursor:ne-resize;>ne-resize</span>
<span style=cursor:nw-resize;>nw-resize</span>
<span style=cursor:se-resize;>se-resize</span>
<span style=cursor:se-resize;>sw-resize</span>
<span style=cursor:ew-resize;>ew-resize</span>
<span style=cursor:ns-resize;>ns-resize</span>
<span style=cursor:nesw-resize;>nesw-resize</span>
<span style=cursor:nwse-resize;>nwse-resize</span>
<span style=cursor:zoom-in;>zoom-in</span>
<span style=cursor:zoom-out;>zoom-out</span>
<span style=cursor:grab;>grab</span>
<span style=cursor:grabbing;>grabbing</span>