# Свойство cursor

Свойство `cursor` устанавливает внешний вид курсора при наведении на элемент.

## Синтаксис

`селектор { cursor: значение; }`

## Примечание

Свойство имеет очень много значений. Ниже я сгруппировал эти значения, чтобы было проще ориентироваться. Внешний вид курсора отличается в разных браузерах, поэтому я не делал фото курсоров, а просто в таблицах со значениями сделал специальную колонку, наведя мышкой на ячейку которой, вы сможете увидеть внешний вид описываемого курсора.

## Значения

Значение | Описание | Внешний вид
--- | --- | ---
`default` | Стандартный внешний вид в виде указателя-стрелки. |
`pointer` | Используется, чтобы показать, что элемент является активным и на него можно нажимать (такой по умолчанию для ссылок). |
`help` | Используется, чтобы показать, что с элементом связана какая-то помощь или вопрос. |
`not-allowed` | Используется, чтобы показать недопустимость операции. |

## Текст

Значение | Описание | Внешний вид
--- | --- | ---
`text` | Стандартный текстовый курсор в виде вертикальной палочки. |
`vertical-text` | Текстовый курсор для вертикального текста. |

## Ожидание

Значение | Описание | Внешний вид
--- | --- | ---
`progress` | Используется, чтобы показать, что происходит какая-то операция и пользователю нужно подождать. |
`wait` | Используется, чтобы показать, что пользователю нужно подождать. |

## Курсор при изменениях размеров

При изменении размеров элемента значение свойства формируется так: слово `resize`, а перед ним через дефис какая-то буква или несколько букв, например: `n-resize` или `ne-resize`.

Эти буквы являются первыми буквами сторон света: nord - север, south - юг, east - восток, west - запад. В данном случае используются соглашения, принятые для карт местности: вверху север, снизу юг, слева запад, справа восток. Конечно же, это запутывает, но придется пользоваться, как придумано:)

Итак, вот значения:

Значение | Направление | Часть света | Внешний вид
--- | --- | --- | ---
`n-resize` | вверх | nord |
`ne-resize` | вправо вверх | nord east |
`e-resize` | вправо | east |
`se-resize` | вправо вниз | south eas |
`s-resize` | вниз | south |
`sw-resize` | влево вниз | south west |
`w-resize` | влево | west |
`nw-resize` | влево вверх | nord west |
`nesw-resize` | вправо вверх и влево вниз | nord east - south west |
`nwse-resize` | влево вверх и вправо вниз | nord west - south east |

## Изменение размеров двух элементов

Значение | Описание | Внешний вид
--- | --- | ---
`col-resize` | Изменение по горизонтали. |
`row-resize` | Изменение по вертикали. |

## Изменение масштаба

Значение | Описание | Внешний вид
--- | --- | ---
`zoom-in` | Увеличение масштаба. |
`zoom-out` | Уменьшение масштаба. |

## Движение

Значение | Описание | Внешний вид
--- | --- | ---
`move` | Используется, чтобы показать, что элемент можно перемещать, или в момент перемещения. |
`all-scroll` | Используется, чтобы показать, что элемент прокручивается мышкой во всех направлениях. |

## Разное

Значение | Описание | Внешний вид
--- | --- | ---
`crosshair` | Внешний вид в виде прицела. |
`cell` | Внешний вид в виде прицела. |

←→
↑