cursor

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

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

Значение по умолчанию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. Вид курсора
ВидЗначениеТестПримерПримечание
defaultP {cursor: default} 
context-menuP {cursor: context-menu}Отображается только в IE10+.
helpP {cursor: help} 
pointerP {cursor: pointer} 
progressP {cursor: progress} 
waitP {cursor: wait} 
cellP {cursor: cell} 
crosshairP {cursor: crosshair} 
textP {cursor: text} 
vertical-textP {cursor: vertical-text} 
aliasP {cursor: alias} 
copyP {cursor: copy} 
moveP {cursor: move} 
no-dropP {cursor: no-drop}Все браузеры, кроме IE, отображают как not-allowed.
not-allowedP {cursor: not-allowed} 
all-scrollP {cursor: all-scroll} 
col-resizeP {cursor: col-resize} 
row-resizeP {cursor: row-resize} 
n-resizeP {cursor: n-resize} 
ne-resizeP {cursor: ne-resize} 
e-resizeP {cursor: e-resize} 
se-resizeP {cursor: se-resize} 
s-resizeP {cursor: s-resize} 
sw-resizeP {cursor: sw-resize} 
w-resizeP {cursor: w-resize} 
nw-resizeP {cursor: nw-resize} 
nesw-resizeP {cursor: nesw-resize} 
nwse-resizeP {cursor: nwse-resize} 
zoom-inP {cursor: zoom-in}IE не поддерживает.
zoom-outP {cursor: zoom-out}IE не поддерживает.
grabP {cursor: grab}Chrome, Opera, Safari поддерживают значение -webkit-grab. IE не поддерживает.
grabbingP {cursor: grabbing}Chrome, Opera, Safari поддерживают значение -webkit-grabbing. IE не поддерживает.

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

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

cursor: url(<адрес>), url(<адрес>), ..., <курсор>

Через запятую допускается указывать несколько значений 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="page/help.html" class="help">СПРАВКА 1</a><br />
   <a href="page/help.html" class="help">СПРАВКА 2</a><br />
   <a href="page/help.html" class="help">СПРАВКА 3</a>
  </p> 
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>cursor</title>
  <style>
   a { cursor: url(/example/cursor/sniper.cur), pointer; }
  </style>
 </head> 
 <body>
  <p>Обычный текст</p>
  <p><a href="page/1.html">Ссылка 1</a> <a href="page/2.html">Ссылка 2</a>
   <a href="page/3.html">Ссылка 3</a></p> 
 </body>
</html>

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

Объект.style.cursor

Примечание

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

Chrome до версии 36, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-zoom-in и -webkit-zoom-out.

Firefox до версии 24 поддерживает значения -moz-zoom-in и -moz-zoom-out.

Chrome до версии 22, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-grab и -webkit-grabbing.

Firefox до версии 27 поддерживает значения -moz-grab и -moz-grabbing.

Браузеры на мобильных устройствах не поддерживают свойство cursor.

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

СпецификацияСтатус
CSS Basic User Interface Module Level 3Рабочий проект
CSS Level 2 (Revision 1)Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры ?

auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize412171.21
pointer, progress612171.21
url()61211531.5
not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize612110.631.5
alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu1012110.631.5
none61451553
zoom-in, zoom-out1243615243.19224
grab, grabbing124221524491.527

Браузеры

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

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

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

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 13.08.2018
Редакторы: Влад Мержевич