тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Свойство 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 Внешний вид в виде прицела.