Свойство cursor

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

Синтаксис

Примечание

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

Значения

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

Текст

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

Ожидание

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

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

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

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

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

Значение	Направление	Часть света	Внешний вид
n-resize	вверх	north
ne-resize	вправо вверх	nord east
e-resize	вправо	east
se-resize	вправо вниз	south east
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	Внешний вид в виде прицела.