свойство cursorCSS3-генератор ☛

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Краткая информация

Значение по умолчанию	auto
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис ?

cursor: [url('путь к курсору'),] | [ <курсор> ]

✖

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

url: Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
auto: Вид курсора по умолчанию для текущего элемента.
none: Отключает отображение курсора.

Остальные допустимые значения приведены в табл. 1.

Табл. 1. Вид курсора
Значение	Пример	Примечание
default	P {cursor: default}
context-menu	P {cursor: context-menu}	Отображается только в IE10+.
help	P {cursor: help}
pointer	P {cursor: pointer}
progress	P {cursor: progress}
wait	P {cursor: wait}
cell	P {cursor: cell}
crosshair	P {cursor: crosshair}
text	P {cursor: text}
vertical-text	P {cursor: vertical-text}
alias	P {cursor: alias}
copy	P {cursor: copy}
move	P {cursor: move}
no-drop	P {cursor: no-drop}	Все браузеры, кроме IE, отображают как not-allowed.
not-allowed	P {cursor: not-allowed}
all-scroll	P {cursor: all-scroll}
col-resize	P {cursor: col-resize}
row-resize	P {cursor: row-resize}
n-resize	P {cursor: n-resize}
ne-resize	P {cursor: ne-resize}
e-resize	P {cursor: e-resize}
se-resize	P {cursor: se-resize}
s-resize	P {cursor: s-resize}
sw-resize	P {cursor: sw-resize}
w-resize	P {cursor: w-resize}
nw-resize	P {cursor: nw-resize}
nesw-resize	P {cursor: nesw-resize}
nwse-resize	P {cursor: nwse-resize}
zoom-in	P {cursor: zoom-in}	IE не поддерживает.
zoom-out	P {cursor: zoom-out}	IE не поддерживает.
grab	P {cursor: grab}	Chrome, Opera, Safari поддерживают значение -webkit-grab. IE не поддерживает.
grabbing	P {cursor: grabbing}	Chrome, Opera, Safari поддерживают значение -webkit-grabbing. IE не поддерживает.

В зависимости от операционной системы и её настроек вид курсора может отличаться от приведённых в таблице.

При добавлении курсора из файла синтаксис несколько видоизменится.

cursor: url('путь к курсору1'), url('путь к курсору2'), ..., <курсор>

Через запятую допускается указывать несколько значений url, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдёт к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer, допустимые значения перечислены выше.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>cursor</title>
  <style>
   .cross { cursor: crosshair; }
   .help { cursor: help; }
  </style>
 </head>
 <body>
  <p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
  <p>
   <a href="help.html" class="help">СПРАВКА 1</a><br />
   <a href="help.html" class="help">СПРАВКА 2</a><br />
   <a href="help.html" class="help">СПРАВКА 3</a>
  </p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>cursor</title>
  <style>
   a { cursor: url(cursor/sniper.cur), pointer; }
  </style>
 </head>
 <body>
  <p>Обычный текст</p>
  <p><a href="1.html">Ссылка 1</a> <a href="2.html">Ссылка 2</a>
   <a href="3.html">Ссылка 3</a></p>
 </body>
</html>

Объектная модель

Объект.style.cursor

Примечание

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Opera не работает с файлами курсора.

Браузеры: Настольные Мобильные ?

	Internet Explorer	Chrome	Opera	Safari	Firefox
auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize	4	1	7	1.2	1
pointer, progress	6	1	7	1.2	1
url()	6	1		3	1.5
not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize	6	1	10.6	3	1.5
alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu	10	1	10.6	3	1.5
none	9	5		5	3
zoom-in, zoom-out	12	1	11.6	3	24
grab, grabbing		22	15	4	27

	Android	Firefox Mobile	Opera Mobile	Safari Mobile
auto, crosshair, default,move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize	1	1	9.5	1.2
pointer, progress	1	1	9.5	1.2
url()	1	1.5		3
not-allowed, no-drop,vertical-text, all-scroll, col-resize, row-resize	1	1.5	10.6	3
alias, cell, copy, ew-resize, ns-resize,nesw-resize, nwse-resize	1	1.5	10.6	3

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Разное