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. Вид курсора
Вид Значение Тест Пример Примечание
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(<адрес>), 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) Рекомендация

Браузеры

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

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

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

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