CSS-свойство cursor

CSS-свойство cursor определяет тип курсора, который будет отображаться при наведении указателя на элемент.

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

cursor: [url (путь к файлу),] 0 or more times | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | initial | inherit

Примеры написания кода свойства cursor:

h1 {
    cursor: copy;
}
p {
    cursor: help;
}
a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}

Свойство cursor может содержать разделенный запятыми список пользовательских значений курсора, за которыми должно следовать значение по умолчанию (generic cursor).

Если первое значение cursor указано неправильно или файл не может быть найден, будет использоваться следующий курсор в списке пока не будет найден доступный курсор для отображения. Подробнее в Руководстве по CSS Cursors.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Вид	Описание
Общее
auto		Браузер определяет курсор для отображения на основе текущего контекста. Это значение установлено по умолчанию.
default		Курсор по умолчанию без учета контекста, обычно стрелка.
none		Курсор не отображается.
initial		Устанавливает это свойство в значение по умолчанию.
inherit		Если указан, связанный элемент принимает вычисленное значение своего родительского элемента cursor.
Links & status Cursors
context-menu		Указывает, что доступно контекстное меню.
help		Указывает, что доступен текст с подсказкой.
pointer		Курсор, который указывает на ссылку, обычно указательным пальцем.
progress		Индикатор прогресса. Программа выполняет некоторую обработку, но пользователь все еще может взаимодействовать с интерфейсом (в отличие от wait).
wait		Указывает, что программа занята, и пользователь должен подождать.
Курсоры выбора
cell		Указывает, что ячейка (или набор ячеек) может быть выбран.
crosshair		Простое перекрестие. Часто используется для обозначения выделения в растровом изображении.
text		Указывает текст, который может быть выбран, как правило, в виде двутавровой балки.
vertical-text		Указывает, что вертикальный текст может быть выбран, как правило, в виде поперечной двутавровой балки.
Drag and Drop курсоры
alias		Указывает, что псевдоним (alias) или ярлык (shortcut) должен быть создан.
copy		Указывает, что что-то может быть скопировано.
move		Указывает, что находящийся объект может быть перемещен.
no-drop		Указывает, что перетаскиваемый элемент не может быть выброшен в текущем местоположении.
not-allowed		Указывает, что что-то не может быть сделано.
Курсоры для ресайза или скролла
all-scroll		Указывает, что что-то можно прокрутить в любом направлении (панорама).
col-resize		Указывает, что размер столбца можно изменить по горизонтали.
row-resize		Указывает, что размер строки можно изменить по вертикали.
n-resize		Указывает, что грань может быть перемещена вверх (на север).
e-resize		Указывает, что грань может быть перемещена вправо (восток).
s-resize		Указывает, что грань может быть перемещена вниз (на юг).
w-resize		Указывает, что грань может быть перемещена влево (запад).
ne-resize		Указывает, что грань может быть перемещена вверх-вправо (северо-восток).
nw-resize		Указывает, что грань может быть перемещена вверх-влево (северо-запад).
se-resize		Указывает, что грань может быть перемещена вниз-вправо (юго-восток).
sw-resize		Указывает, что грань может быть перемещена вниз-влево (юго-запад).
ew-resize		Указывает двунаправленный курсор изменения размера.
ns-resize
nesw-resize
nwse-resize
Zoom и Grab курсоры
zoom-in		Указывает, что что-то может быть увеличено.
zoom-out		Указывает, что что-то можно уменьшить.
grab		Указывает, что что-то может быть захвачено (перетащено для перемещения).
grabbing		Указывает, что что-то схвачено.

Поддержка браузеров

Свойство cursor поддерживается во всех основных браузерах.