Курсор

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

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

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

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

cursor: grab;

<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;
}

Синтаксис

/* Ключевые слова */
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	default.gif	Основной курсор платформы, обычно стрелочка.
	none	Курсор не отображается.
Ссылки и статусы выполнения задач	context-menu	context-menu.png	Доступно контекстное меню.
	help	help.gif	Доступна вспомогательная информация.
	pointer	pointer.gif	Указатель, обозначающий ссылку, обычно указующая рука.
	progress	progress.gif	Программа занята, но пользователь может взаимодействовать с интерфейсом (в отличие от wait).
	wait	wait.gif	Программа занята (песочные часы).
Выделение	cell	cell.gif	Указывает на возможность выбора клетки или клеток таблицы.
	crosshair	crosshair.gif	Крестик, часто используемый для обозначения выбора на битовой карте.
	text	text.gif	Значок выбора текста.
	vertical-text	vertical-text.gif	Значок выбора вертикального текста.
"Захвати и перенеси"	alias	alias.gif	Будет создана ссылка внутри страницы.
	copy	copy.gif	Указывает на возможность копирования.
	move	move.gif	Указывает на возможность перемещения объекта.
	no-drop	no-drop.gif	Указывает на невозможность "сбрасывания" объекта. В Windows и Mac OSX то же самое что и not-allowed.
	not-allowed	not-allowed.gif	Указатель невозможности выполнения действия.
Изменение размера, прокручивание (скроллинг)	all-scroll	all-scroll.gif	Указатель возможности перемещения по странице в любом направлении. в Windows то же самое что move.
	col-resize	col-resize.gif	Объект может быть раздвинут/сдвинут горизонтально. Обычно две вертикальные черты со стрелочками в разные стороны.
	row-resize	row-resize.gif	Объект может быть раздвинут/сдвинут вертикально. Две горизонтальные черты с вертикальными стрелочками.
	n-resize	Example of a resize towards the top cursor	Грань или грани могут быть перемещены. Например se-resize используется для обозначения перемещения с юго-востока. В некоторых системах то же самое что двунаправленное изменение.
	e-resize	Example of a resize towards the right cursor
	s-resize	Example of a resize towards the bottom cursor
	w-resize	Example of a resize towards the left cursor
	ne-resize	Example of a resize towards the top-right corner cursor
	nw-resize	Example of a resize towards the top-left corner cursor
	se-resize	Example of a resize towards the bottom-right corner cursor
	sw-resize	Example of a resize towards the bottom-left corner cursor
	ew-resize	3-resize.gif	Двунаправленное изменение размера.
	ns-resize	6-resize.gif
	nesw-resize	1-resize.gif
	nwse-resize	4-resize.gif
Масштабирование	zoom-in	zoom-in.gif	Приближение или уменьшение.
	zoom-out	zoom-out.gif
Захват	grab	grab.gif	Указывает на возможность схватить и переместить объект.
	grabbing	grabbing.gif

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

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

cursor = 
 <cursor-image># ? <cursor-predefined> 

<cursor-image> = 
 [ <url> | <url-set> ] [ <number> {2} ] ? 

<cursor-predefined> = 
 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 

Примеры

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

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

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

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

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

• pointer-events
• url() function