Свойство cursor

Описание

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы, браузера и установленных параметров.

Синтаксис

cursor: [url('адрес'),] | [ курсор ];
Значение Описание
url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
auto Вид курсора по умолчанию для текущего элемента.
none Отключает отображение курсора.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.itemCursor {
background-color: lightcoral;
padding: 7px;
outline: 2px solid #ddd;
text-align: center;
display: inline-block;
margin: 5px;
}
.itemCursor-1 {
cursor: auto;
}
.itemCursor-2 {
cursor: default;
}
.itemCursor-3 {
cursor: none;
}
.itemCursor-4 {
cursor: context-menu;
}
.itemCursor-5 {
cursor: help;
}
.itemCursor-6 {
cursor: pointer;
}
.itemCursor-7 {
cursor: progress;
}
.itemCursor-8 {
cursor: wait;
}
.itemCursor-9 {
cursor: cell;
}
.itemCursor-10 {
cursor: crosshair;
}
.itemCursor-11 {
cursor: text;
}
.itemCursor-12 {
cursor: vertical-text;
}
.itemCursor-13 {
cursor: alias;
}
.itemCursor-14 {
cursor: move;
}
.itemCursor-15 {
cursor: no-drop;
}
.itemCursor-16 {
cursor: not-allowed;
}
.itemCursor-17 {
cursor: all-scroll;
}
.itemCursor-18 {
cursor: col-resize;
}
.itemCursor-19 {
cursor: row-resize;
}
.itemCursor-20 {
cursor: n-resize;
}
.itemCursor-21 {
cursor: e-resize;
}
.itemCursor-22 {
cursor: s-resize;
}
.itemCursor-23 {
cursor: w-resize;
}
.itemCursor-24 {
cursor: ne-resize;
}
.itemCursor-25 {
cursor: nw-resize;
}
.itemCursor-26 {
cursor: se-resize;
}
.itemCursor-27 {
cursor: sw-resize;
}
.itemCursor-28 {
cursor: ew-resize;
}
.itemCursor-29 {
cursor: ns-resize;
}
.itemCursor-30 {
cursor: nesw-resize;
}
.itemCursor-31 {
cursor: nwse-resize;
}
.itemCursor-32 {
cursor: zoom-in;
}
.itemCursor-33 {
cursor: zoom-out;
}
.itemCursor-34 {
cursor: grab;
}
.itemCursor-35 {
cursor: grabbing;
}
</style>
<div class='itemCursor itemCursor-1'>auto</div>
<div class='itemCursor itemCursor-2'>default</div>
<div class='itemCursor itemCursor-3'>none</div>
<div class='itemCursor itemCursor-4'>context-menu</div>
<div class='itemCursor itemCursor-5'>help</div>
<div class='itemCursor itemCursor-6'>pointer</div>
<div class='itemCursor itemCursor-7'>progress</div>
<div class='itemCursor itemCursor-8'>wait</div>
<div class='itemCursor itemCursor-9'>cell</div>
<div class='itemCursor itemCursor-10'>crosshair</div>
<div class='itemCursor itemCursor-11'>text</div>
<div class='itemCursor itemCursor-12'>vertical-text</div>
<div class='itemCursor itemCursor-13'>alias</div>
<div class='itemCursor itemCursor-14'>move</div>
<div class='itemCursor itemCursor-15'>no-drop</div>
<div class='itemCursor itemCursor-16'>not-allowed</div>
<div class='itemCursor itemCursor-17'>all-scroll</div>
<div class='itemCursor itemCursor-18'>col-resize</div>
<div class='itemCursor itemCursor-19'>row-resize</div>
<div class='itemCursor itemCursor-20'>n-resize</div>
<div class='itemCursor itemCursor-21'>e-resize</div>
<div class='itemCursor itemCursor-22'>s-resize</div>
<div class='itemCursor itemCursor-23'>w-resize</div>
<div class='itemCursor itemCursor-24'>ne-resize</div>
<div class='itemCursor itemCursor-25'>nw-resize</div>
<div class='itemCursor itemCursor-26'>se-resize</div>
<div class='itemCursor itemCursor-27'>sw-resize</div>
<div class='itemCursor itemCursor-28'>ew-resize</div>
<div class='itemCursor itemCursor-29'>ns-resize</div>
<div class='itemCursor itemCursor-30'>nesw-resize</div>
<div class='itemCursor itemCursor-31'>nwse-resize</div>
<div class='itemCursor itemCursor-32'>zoom-in</div>
<div class='itemCursor itemCursor-33'>zoom-out</div>
<div class='itemCursor itemCursor-34'>grab</div>
<div class='itemCursor itemCursor-35'>grabbing</div>
</body>
</html>
auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
move
no-drop
not-allowed
all-scroll
col-resize
row-resize
n-resize
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
ns-resize
nesw-resize
nwse-resize
zoom-in
zoom-out
grab
grabbing

Читайте также

Свойство overflow-y

Управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещае...

Правило @keyframes

Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства...

Свойство animation-delay

Устанавливает задержку старта анимации.

Свойство padding-inline-end

Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника по ст...

Свойство animation-timing-function

Устанавливает функцию расчета значений между началом и концом анимации.