cursor
Обновлено: 21.12.2022
cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Краткая информация
| Значение по умолчанию | auto |
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
cursor: [url('адрес'),] | [ <курсор> ]Значения
| url | Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором. |
| auto | Вид курсора по умолчанию для текущего элемента. |
| none | Отключает отображение курсора. |
Остальные допустимые значения приведены в табл. 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.