cursor

Властивість CSS cursor (покажчик) встановлює курсор миші, котрий повинен бути показаний, коли вказівник миші розташований над елементом.

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

Спробуйте його в дії

Синтаксис

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

/* URL з обов‘язковим запасним варіантом – ключовим словом */
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;

Властивість cursor встановлюється довільною кількістю значень <url> (нуль чи більше), розділених комами, з обов'язковим ключовим словом у кінці. Кожен <url> повинен вказувати на файл зображення. Браузер намагатиметься завантажити перше вказане зображення, переходячи до наступного у випадку невдачі, і переходить до використання ключового слова, якщо жодне з зображень не вдалось завантажити (або якщо жодне не було вказано).

Кожен <url> може мати на додачу два розділені пробілами числові значення, котрі встановлюють координати <x> та <y> розташування гарячої точки курсора на зображенні, відносно його лівого верхнього кута.

Значення

<url> Необов'язкове

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

<x>, <y> Необов'язкове

Необов'язкові x та y координати вказують гарячу точку курсора; точну позицію всередині курсора, на котру відбувається вказування.

Числа – в одиницях пікселів зображення. Вони відносні щодо лівого верхнього кута зображення, що відповідає 0 0, і обрізаються в межах зображення курсора. Якщо ці значення не вказані, то вони можуть бути прочитані з самого файлу, а інакше – усталено вважатимуться 0 0.

keyword

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

Доступні ключові слова вказані у таблиці нижче. Для всіх, крім none – відсутності курсора, додано зображення, котре демонструє, як раніше зображався курсор. Можна навести мишу на ряди таблиці, щоб побачити дію різних ключових слів курсора на браузер нині.

Категорія	Ключове слово	Приклад	Опис
Загальні	auto		Користувацький агент визначить курсор на основі поточного контексту. Наприклад, еквівалентно до text, коли вказівник знаходиться над текстом.
	default		Залежний від платформи усталений курсор. Зазвичай – стрілка.
	none		Не показано жодного курсора.
Посилання та статус	context-menu		Доступне контекстне меню.
	help		Доступна допоміжна інформація.
	pointer		Курсор – вказівник, що показує посилання. Зазвичай зображення руки, що вказує пальцем.
	progress		Програма зайнята у фоні, але користувач може надалі взаємодіяти з інтерфейсом (на відміну від wait).
	wait		Програма зайнята, і користувач не може взаємодіяти з інтерфейсом (на відміну від progress). Іноді – зображення піскового або кишенькового годинника.
Вибір	cell		Комірка таблиці або набір комірок, що можна вибрати.
	crosshair		Хрестовий курсор. Часто використовується для показу вибору на растровому зображенні.
	text		Текст може бути виділеним. Зазвичай має форму двотавра.
	vertical-text		Вертикальний текст може бути виділеним. Зазвичай має форму горизонтального двотавра.
Drag & drop	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

Формальне визначення

{{cssinfo}}

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

[ [ <url> [ <x> <y> ]? , ]* [ 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 ] ]

Зауваження щодо використання

Обмеження розмірів значків

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

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

Специфікація вимагає від користувацьких факторів підтримки файлів PNG, файлів SVG версії 1.1 у безпечному статичному режимі, що мають природний розмір, та будь-яких інших неанімованих форматів файлів зображень, що підтримуються для зображень в інших властивостях. Стільничні браузери також широко підтримують формат файлів .cur.

Далі специфікація показує, що користувацькі агенти повинні також підтримувати файли SVG версії 1.1 files у безпечному анімованому режимі, що мають природний розмір, поруч із будь-якими іншими анімованими форматами файлів зображень, що підтримуються для зображень в інших властивостях. Користувацькі агенти можуть підтримувати як статичні, так анімовані SVG зображення, що не мають природного розміру.

iPadOS

iPadOS підтримує пристрої-вказівники штибу трекпедів та мишей. Усталено курсор iPad виводиться у вигляді кола, і єдине підтримуване значення, що змінює вигляд вказівника — text.

Інші примітки

Заміна курсора, що знаходиться на панелях інструментів, загальноприйнято заблокована для запобігання ошуканству.

Приклади

Встановлення типів курсорів

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* Запасний варіант у вигляді ключового слова обов‘язковий при використанні URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

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

Сумісність із браузерами

Дивіться також

• pointer-events
• Тип <url>