cursor

Обновлено: 27.05.2022

cursor

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

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

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

Синтаксис

cursor: [url('адрес'),] | [ <курсор> ]

Значения

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, допустимые значения перечислены выше.

Пример

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

Объект.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.

Браузеры

cursor

Посмотреть совместимость на Can I use?

cursor