# cursor property

The `cursor` property sets the appearance of the cursor when hovering over an element.

## Syntax

`selector { cursor: value; }`

## Comment

The property has many values. I have grouped these values ​​below to make it easier to navigate. The appearance of the cursor differs in different browsers, so I did not take photos of the cursors, but simply made a special column in the tables with values, hovering over the cell of which you can see the appearance of the described cursor.

## Values

Value | Description | Appearance
--- | --- | ---
`default` | Standard arrow pointer appearance. |
`pointer` | Used to indicate that the element is active and clickable (this is the default for links). |
`help` | Used to show that there is some help or question associated with an element. |
`not-allowed` | Used to show that an operation is invalid. |

## Text

Value | Description | Appearance
--- | --- | ---
`text` | Standard text cursor in the form of a vertical stick. |
`vertical-text` | Text cursor for vertical text. |

## Waiting

Value | Description | Appearance
--- | --- | ---
`progress` | Used to indicate that some operation is in progress and the user needs to wait. |
`wait` | Used to indicate that the user needs to wait. |

## Resizing

When changing the size of an element, the property value is formed as follows: the word `resize`, and before it, separated by a hyphen, some letter or several letters, for example: `n-resize` or `ne-resize`.

These letters are the first letters of the cardinal points: north, south, east, west. In this case, the conventions adopted for terrain maps are used: north at the top, south at the bottom, west on the left, east on the right. Of course, this is confusing, but you have to use it as intended :)

So here are the values:

Value | Direction | Point | Appearance
--- | --- | --- | ---
`n-resize` | top | north |
`ne-resize` | right top | north east |
`e-resize` | right | east |
`se-resize` | right bottom | south east |
`s-resize` | bottom | south |
`sw-resize` | left bottom | south west |
`w-resize` | left | west |
`nw-resize` | left top | nord west |
`nesw-resize` | right top and left bottom | nord east - south west |
`nwse-resize` | left top and right bottom | nord west - south east |

## Resizing two elements

Value | Description | Appearance
--- | --- | ---
`col-resize` | Horizontal resizing. |
`row-resize` | Vertical resizing. |

## Changing a zoom

Value | Description | Appearance
--- | --- | ---
`zoom-in` | Zoom in. |
`zoom-out` | Zoom out. |

## Movement

Value | Description | Appearance
--- | --- | ---
`move` | Used to show that an element can be moved, or when it is being moved. |
`all-scroll` | Used to indicate that an element is scrollable by the mouse in all directions. |

## Miscellaneous

Value | Description | Appearance
--- | --- | ---
`crosshair` | Crosshair cursor. |
`cell` | Crosshair cursor. |

← →
↑
en ru