cursor¶
Свойство cursor
устанавливает форму курсора, когда он находится в пределах элемента.
Вид курсора зависит от операционной системы и установленных параметров.
Демо¶
Интерфейс
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
Значения¶
url
- Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
auto
- Вид курсора по умолчанию для текущего элемента.
none
- Отключает отображение курсора.
Остальные допустимые значения приведены в табл. 1.
Табл. 1. Вид курсора
Вид | Значение |
---|---|
![]() | default |
![]() | context-menu |
![]() | help |
![]() | pointer |
![]() | progress |
![]() | wait |
![]() | cell |
![]() | crosshair |
![]() | text |
![]() | vertical-text |
![]() | alias |
![]() | copy |
![]() | move |
![]() | no-drop |
![]() | not-allowed |
![]() | all-scroll |
![]() | col-resize |
![]() | row-resize |
![]() | n-resize |
![]() | ne-resize |
![]() | e-resize |
![]() | se-resize |
![]() | s-resize |
![]() | sw-resize |
![]() | w-resize |
![]() | nw-resize |
![]() | nesw-resize |
![]() | nwse-resize |
![]() | zoom-in |
![]() | zoom-out |
![]() | grab |
![]() | grabbing |
В зависимости от операционной системы и её настроек вид курсора может отличаться от приведённых в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
1 |
|
Через запятую допускается указывать несколько значений url
, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдёт к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto
или pointer
, допустимые значения перечислены выше.
Примечание¶
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
.
Значение по-умолчанию:
1 |
|
Применяется ко всем элементам
Спецификации¶
- CSS Basic User Interface Module Level 4
- CSS Basic User Interface Module Level 3
- CSS Level 2 (Revision 1)
Поддержка браузерами¶
cursor: zoom-in/zoom-out
:
Примеры¶
Пример 1¶
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Пример 2¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
Пример 3¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
Ссылки¶
- Свойство cursor на сайте MDN