Курсор

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

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

Интерактивный пример

Синтаксис

css

/* Ключевые слова */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* Использование с обязательным резервным ключевым словом */
cursor: url(hand.cur), pointer;

/* Использование URL и координат с обязательным резервным ключевым словом */
cursor:
  url(cursor_1.png) 4 12,
  auto;
cursor:
  url(cursor_2.png) 2 2,
  pointer;

/* Использование URL с резервными URL (иногда с координатами) с обязательным резервным ключевым словом */
cursor:
  url(cursor_1.svg) 4 5,
  url(cursor_2.svg),
  /* …, */ url(cursor_n.cur) 5 5,
  progress;

/* Глобальные значения */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

Значения

<url> Необязательный

url() или разделенный запятыми список url(), url(), …, указывающий на файл изображения. В качестве запасного варианта можно указать несколько url() на случай, если некоторые типы изображений курсора не поддерживаются. Резервный вариант, отличный от URL-адреса (одно или несколько ключевых слов), должен находиться в конце резервного списка.

<x>, <y> Необязательный

Необязательные координаты X и Y, задающие указательную точку курсора.

Эти значения необходимо указывать в координатах изображения. Они располагаются относительно верхнего левого угла изображения (соответствует0 0) и ограничены размерами изображения курсора. Если эти значения не указаны, они могут быть прочитаны из самого файла, в противном случае по умолчанию они будут находиться в верхнем левом углу изображения.

keyword

Ключевое слово должно быть установлено для указания типа используемого курсора или резервного курсора, который будет использоваться, если не удастся загрузить указанные значки.

Доступные ключевые слова перечислены в таблице ниже. Значения кроме none (что означает отсутствие курсора), являются изображением, которое будет использовано для отображения курсора. Вы можете навести указатель мыши на строки таблицы, чтобы увидеть эффект применения различных значений ключевых слов.

Категория	Значение	Описание
Основные	`auto`	Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента, на который наведена мышь. Например: при наведении на текст отобразит курсор `text`.
	`default`	Основной курсор платформы, обычно стрелочка.
	`none`	Курсор не отображается.
Ссылки и статусы выполнения задач	`context-menu`	Доступно контекстное меню.
	`help`	Доступна вспомогательная информация.
	`pointer`	Указатель, обозначающий ссылку, обычно указующая рука.
	`progress`	Программа занята, но пользователь может взаимодействовать с интерфейсом (в отличие от `wait`).
	`wait`	Программа занята (песочные часы).
Выделение	`cell`	Указывает на возможность выбора клетки или клеток таблицы.
	`crosshair`	Крестик, часто используемый для обозначения выбора на битовой карте.
	`text`	Значок выбора текста.
	`vertical-text`	Значок выбора вертикального текста.
"Захвати и перенеси"	`alias`	Будет создана ссылка внутри страницы.
	`copy`	Указывает на возможность копирования.
	`move`	Указывает на возможность перемещения объекта.
	`no-drop`	Указывает на невозможность "сбрасывания" объекта. В Windows и Mac OSX то же самое что и `not-allowed`.
	`not-allowed`	Указатель невозможности выполнения действия.
Изменение размера, прокручивание (скроллинг)	`all-scroll`	Указатель возможности перемещения по странице в любом направлении. в Windows то же самое что `move`.
	`col-resize`	Объект может быть раздвинут/сдвинут горизонтально. Обычно две вертикальные черты со стрелочками в разные стороны.
	`row-resize`	Объект может быть раздвинут/сдвинут вертикально. Две горизонтальные черты с вертикальными стрелочками.
	`n-resize`	Грань или грани могут быть перемещены. Например `se-resize` используется для обозначения перемещения с юго-востока. В некоторых системах то же самое что двунаправленное изменение.
	`e-resize`
	`s-resize`
	`w-resize`
	`ne-resize`
	`nw-resize`
	`se-resize`
	`sw-resize`
	`ew-resize`	Двунаправленное изменение размера.
	`ns-resize`
	`nesw-resize`
	`nwse-resize`
Масштабирование	`zoom-in`	Приближение или уменьшение.
Масштабирование	`zoom-out`	Приближение или уменьшение.
Захват	`grab`	Указывает на возможность схватить и переместить объект.
Захват	`grabbing`	Указывает на возможность схватить и переместить объект.

Формальное определение

Начальное значение	`auto`
Применяется к	все элементы
Наследуется	да
Обработка значения	как указано, но с абсолютными значениями `url`
Animation type	discrete

Формальный синтаксис

cursor = 
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ 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 ]  

<url> = 
  <url()>  |
  <src()>  

<x> = 
  x  

<y> = 
  y  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Примеры

Задание типа курсора

css

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* Использование резервного ключевого слова обязательно при использовании URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

Спецификации

Specification
CSS Basic User Interface Module Level 4 # cursor

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

pointer-events
url() function