CSS свойство cursor

Определение и применение

CSS свойство cursor определяет тип отображаемого курсора.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
cursor	5.0	4.0	9.6	5.0	5.5	12.0

IE не поддерживает пользовательские курсоры URL(), значения zoom-in, zoom-out.
Значение context-menu имеет ограниченную поддержку браузерами. Значения grab и grabbing требуют индекс производителя.

CSS синтаксис:

cursor:"alias | all-scroll | auto | cell | context-menu | col-resize | copy | crosshair | default | e-resize | ew-resize | grab | grabbing | help | move | n-resize | ne-resize | nesw-resize | ns-resize | nw-resize | nwse-resize | no-drop | none | not-allowed | pointer | progress | row-resize | s-resize | se-resize | sw-resize| text | URL (свой) | vertical-text | w-resize | wait | zoom-in | zoom-out | initial | inherit";

JavaScript синтаксис:

object.style.cursor = "alias"

Значения свойства

Наведите на строку с интересующим Вас значением курсора для изменения его вида:

Значение	Описание
alias	Курсор указывает, что алиас или ярлык будет создан.
all-scroll	Курсор показывает, что что-то можно прокручивать в любом направлении.
auto	Браузер устанавливает курсор. Это значение по умолчанию.
cell	Курсор указывает на то, что ячейка (или группа ячеек) может быть выбрана.
context-menu	Курсор указывает на то, что контекстное меню доступно.
col-resize	Курсор указывает, что столбец может быть изменен по горизонтали.
copy	Курсор указывает, что что-то может быть скопировано.
crosshair	Курсор в виде перекрестия. Go! go! go!.
default	Курсор по умолчанию.
e-resize	Курсор указывает, что край блока перемещается вправо (east-восток).
ew-resize	Курсор указывает, двунаправленное изменение размера.
grab	Курсор указывает, что что-то можно схватить (перенести).
grabbing	Курсор указывает, что что-то переносится.
help	Курсор указывает на то, что доступна помощь.
move	Курсор указывает на то, что что-то можно переместить.
n-resize	Курсор указывает, что край блока перемещается вверх (north - север).
ne-resize	Курсор указывает, что край блока перемещается вверх и право (north/east - север/восток).
nesw-resize	Курсор указывает, двунаправленное изменение размера.
ns-resize	Курсор указывает, двунаправленное изменение размера.
nw-resize	Курсор указывает, что край блока перемещается вверх и влево (north/west - север/запад).
nwse-resize	Курсор указывает, двунаправленное изменение размера.
no-drop	Курсор указывает, что перетаскиваемый объект не может быть помещён здесь.
none	Курсор не отображается для элемента.
not-allowed	Курсор указывает, что запрошенное действие не будет выполняться.
pointer	Курсор-указатель (как правило указывает ссылку).
progress	Курсор указывает на то, что программа выполняется.
row-resize	Курсор указывает на то, что ряд может быть изменен по вертикали.
s-resize	Курсор указывает, что край блока перемещается вниз (south - юг).
se-resize	Курсор указывает, что край блока перемещается вниз и право (south/east - юг/восток).
sw-resize	Курсор указывает, что край блока перемещается вниз и влево (south/west - юг/запад).
text	Курсор указывает, что текст может быть выбран (выделен).
URL (свой)	Пользовательский курсор. Допускается указывать через запятую несколько вариантов. IExplorer не поддерживает пользовательские курсоры. Если у Вас не отображается Ваше изображение - попробуйте в графическом редакторе убрать у него задний фон (сделать прозрачным). Пример (если для курсора не загружено первое изображение, то браузер использует второе, если и второе не будет загружено, то браузер установит курсор по умолчанию): cursor: url(/images/mini3.png), url(/images/mini5.png), auto;
vertical-text	Курсор указывает, что вертикальный текст может быть выбран (выделен).
w-resize	Курсор указывает, что край блока перемещается влево (west-запад).
wait	Курсор указывает на то, что программа в настоящее время занята.
zoom-in	Курсор показывает, что что-то может быть увеличено.
zoom-out	Курсор показывает, что что-то может быть уменьшено.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример изменения курсора в CSS</title>
<style> 
.hidden {
visibility : hidden; /* скрываем блок (место под него остается) */
width : 125px; /* устанавливаем ширину невидимого блока */
text-align : center; /* выравниваем текст по центру */
}
.button {
visibility : visible; /* внутри скрытого блока элемент будет отображаться */
border : 1px solid orange; /* сплошная граница оранжевого цвета размером в 1 пиксель */
}
.hidden:hover {
visibility : visible; /* при наведении мышкой скрытый блок будет отображен */
cursor : wait; /*  при наведении курсор примет вид "программа занята" */
}
</style>
</head>
<body>
	<div class = "hidden">Пожалуйста, подождите...
		<div class = "button">Наведи на меня.</div>
	</div>
</body>
</html>

Результат примера:

Открыть пример в новом окне

CSS свойства