CSS-свойство `cursor`

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

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

Попробуйте

cursor: pointer;

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

<section class="default-example container" id="default-example">
  <div id="example-element">
    Move over this element to see the cursor style.
  </div>
</section>

#example-element {
  display: flex;
  background-color: #1766aa;
  color: white;
  height: 180px;
  width: 360px;
  justify-content: center;
  align-items: center;
  font-size: 14pt;
  padding: 5px;
}

Синтаксис

/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL with mandatory keyword fallback */
cursor: url("hand.cur"), pointer;

/* URL and coordinates, with mandatory keyword fallback */
cursor:
  url("cursor_1.png") 4 12,
  auto;
cursor:
  url("cursor_2.png") 2 2,
  pointer;

/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor:
  url("cursor_1.svg") 4 5,
  url("cursor_2.svg"),
  /* …, */ url("cursor_n.cur") 5 5,
  progress;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

Свойство cursor задаётся нулём или несколькими значениями <url>, разделёнными запятыми, за которыми следует одно обязательное ключевое слово. Каждый <url> должен указывать на файл изображения. Браузер попытается загрузить первое указанное изображение, при неудаче перейдёт к следующему, а если ни одно изображение не удалось загрузить (или они не были указаны), будет использовать значение ключевого слова.

После каждого <url> можно указать пару чисел, разделённых пробелом; эти числа задают координаты <x> и <y> активной точки курсора относительно верхнего левого угла изображения.

Значения

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

Значение url() или список url(), url(), …, разделённых запятыми и указывающих на файл изображения. В качестве резервных вариантов можно указать несколько значений <url> на случай, если некоторые типы изображений курсора не поддерживаются. Нечисловое резервное значение (одно или несколько ключевых слов) должно находиться в конце списка резервных вариантов.

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

Необязательные координаты x и y, указывающие на активную точку курсора — точное место, на которое указывает курсор.

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

keyword

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

Доступные ключевые слова перечислены в таблице ниже. Кроме none, означающего отсутствие курсора, для каждого значения показано изображение курсора, отображавшегося ранее. Наведите указатель мыши на строки таблицы, чтобы увидеть, как разные значения ключевых слов курсора отображаются в вашем браузере сегодня.

Категория	Ключевое слово	Пример	Описание
Общие	auto		Пользовательский агент определяет отображаемый курсор в зависимости от текущего контекста. Например, при наведении на текст он эквивалентен text.
	default		Курсор по умолчанию, зависящий от платформы. Обычно это стрелка.
	none		Курсор не отображается.
Ссылки и состояние	context-menu		Доступно контекстное меню.
	help		Доступна справочная информация.
	pointer		Курсор в виде указателя обозначает ссылку. Обычно это изображение указывающей руки.
	progress		Программа выполняет задачу в фоновом режиме, но пользователь всё ещё может взаимодействовать с интерфейсом (в отличие от wait).
	wait		Программа занята, и пользователь не может взаимодействовать с интерфейсом (в отличие от progress). Иногда отображается изображение песочных или наручных часов.
Выделение	cell		Можно выделить ячейку таблицы или набор ячеек.
	crosshair		Курсор в виде перекрестия, часто используемый для обозначения выделения на растровом изображении.
	text		Можно выделить текст. Обычно имеет форму двутавровой балки.
	vertical-text		Можно выделить вертикальный текст. Обычно имеет форму повёрнутой набок двутавровой балки.
Перетаскивание	alias		Будет создан псевдоним или ярлык.
	copy		Будет скопирован объект.
	move		Объект будет перемещён.
	no-drop		В текущем месте нельзя отпустить элемент. Ошибка Firefox 275173: в Windows и macOS no-drop совпадает с not-allowed.
	not-allowed		Запрошенное действие не будет выполнено.
	grab		Объект можно захватить (перетащить, чтобы переместить).
	grabbing		Объект захвачен (перетаскивается для перемещения).
Изменение размера и прокрутка	all-scroll		Объект можно прокручивать в любом направлении (перемещать). Ошибка Firefox 275174: в Windows all-scroll совпадает с move.
	col-resize		Размер элемента или столбца можно изменить по горизонтали. Часто отображается в виде стрелок, направленных влево и вправо, с вертикальной полосой между ними.
	row-resize		Размер элемента или строки можно изменить по вертикали. Часто отображается в виде стрелок, направленных вверх и вниз, с горизонтальной полосой между ними.
	n-resize		Будет перемещён край объекта. Например, курсор se-resize используется, если перемещение начинается из юго-восточного угла рамки. В некоторых средах отображается эквивалентный двунаправленный курсор изменения размера. Например, n-resize и s-resize совпадают с ns-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

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

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

cursor = 
  [ [ <url> [ <x> <y> ]? , ]* <cursor-predefined> ]

<cursor-predefined> = 
  auto |
  default |
  none |
  context-menu |
  help |
  pointer |
  progress |
  wait |
  cell |
  crosshair |
  text |
  vertical-text |
  alias |
  copy |
  move |
  no-drop |
  not-allowed |
  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 |
  grab |
  grabbing

Примечания по использованию

Ограничения на размер значка

Хотя спецификация не ограничивает размер изображения cursor, пользовательские агенты обычно устанавливают для него ограничения, чтобы избежать возможного злоупотребления. Например, в Firefox и Chromium размер изображений курсора по умолчанию ограничен 128x128 пикселями, однако рекомендуется использовать изображения курсора размером не более 32x32 пикселей. Изменения курсора с помощью изображений, размер которых превышает максимально допустимый пользовательским агентом, обычно игнорируются.

Поддерживаемые форматы файлов изображений

Согласно спецификации, пользовательские агенты должны поддерживать файлы PNG, файлы SVG v1.1 в безопасном статическом режиме с естественным размером, а также любые другие форматы статических изображений, которые они поддерживают для изображений в других свойствах. Браузеры для настольных компьютеров также широко поддерживают формат файлов .cur.

В спецификации также указано, что пользовательским агентам следует поддерживать файлы SVG v1.1 в безопасном анимированном режиме с естественным размером, а также любые другие форматы анимированных изображений, которые они поддерживают для изображений в других свойствах. Пользовательские агенты могут поддерживать статические и анимированные изображения SVG без естественного размера.

iPadOS

iPadOS поддерживает устройства-указатели, например трекпады и мыши. По умолчанию курсор iPad отображается в виде круга. Единственное поддерживаемое значение, изменяющее внешний вид указателя, — text.

Другие примечания

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

Примеры

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

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

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

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

См. также

• pointer-events
• <url> тип
• атрибут SVG cursor