cursor¶
Свойство cursor
устанавливает форму курсора, когда он находится в пределах элемента.
Вид курсора зависит от операционной системы и установленных параметров.
Интерфейс
Синтаксис¶
/* Keyword value only */
cursor: pointer;
cursor: auto;
/* Using URL and coordinates */
cursor: url('cursor1.png') 4 12, auto;
cursor: url('cursor2.png') 2 2, pointer;
/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;
Значения¶
url
- Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
auto
- Вид курсора по умолчанию для текущего элемента.
none
- Отключает отображение курсора.
Остальные допустимые значения приведены в табл. 1.
Вид | Значение | Тест | Пример |
---|---|---|---|
 | default | P | |
 | context-menu | P | |
 | help | P | |
 | pointer | P | |
 | progress | P | |
 | wait | P | |
 | cell | P | |
 | crosshair | P | |
 | text | P | |
 | vertical-text | P | |
 | alias | P | |
 | copy | P | |
 | move | P | |
 | no-drop | P | |
 | not-allowed | P | |
 | all-scroll | P | |
 | col-resize | P | |
 | row-resize | P | |
 | n-resize | P | |
 | ne-resize | P | |
 | e-resize | P | |
 | se-resize | P | |
 | s-resize | P | |
 | sw-resize | P | |
 | w-resize | P | |
 | nw-resize | P | |
 | nesw-resize | P | |
 | nwse-resize | P | |
 | zoom-in | P | |
 | zoom-out | P | |
 | grab | P | |
 | grabbing | P |
В зависимости от операционной системы и её настроек вид курсора может отличаться от приведённых в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
cursor: url('путь к курсору1'), url('путь к курсору2'), ..., <курсор>
Через запятую допускается указывать несколько значений 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
.
Значение по-умолчанию:
cursor: auto;
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
cursor: zoom-in/zoom-out
:
Примеры¶
Пример 1¶
<!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>
Пример 2¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cursor</title>
<style>
a {
cursor: url('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>
Ссылки¶
- Свойство cursor на сайте MDN