CSS свойство cursor

CSS свойства

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
cursor5.04.09.65.05.512.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 свойства