CSS-курсор
Он используется для определения типа курсора мыши, когда указатель мыши находится на элементе. Это позволяет нам указать тип курсора, который будет отображаться пользователю. Когда пользователь наводит курсор на ссылку, то по умолчанию курсор превращается в руку из указателя.
Давайте разберемся со значениями свойств курсора.
alias
Он используется для отображения указания курсора на что-то, что должно быть создано.
auto
Это свойство по умолчанию, в котором браузер устанавливает курсор.
all-scroll
Это указывает на прокрутку.
col-resize
Используя его, курсор будет представлять, что размер столбца можно изменить по горизонтали.
cell
Курсор будет означать, что выбрана ячейка или набор ячеек.
context-menu
Указывает на наличие контекстного меню.
default
Он указывает на стрелку, которая является курсором по умолчанию.
copy
Он используется для обозначения того, что что-то копируется.
crosshair
В нем курсор меняется на перекрестие или плюсик.
e-resize
Он представляет восточное направление и указывает, что край прямоугольника должен быть сдвинут вправо.
ew-resize
Он представляет направление восток/запад и указывает на двунаправленный курсор изменения размера.
n-resize
Он представляет северное направление, которое указывает, что край прямоугольника должен быть сдвинут вверх.
ne-resize
Он представляет направление север/восток и указывает, что край прямоугольника должен быть сдвинут вверх и вправо.
move
Это указывает на то, что что-то должно быть смещено.
help
Он имеет форму вопросительного знака или воздушного шара, который означает, что помощь доступна.
None
Он используется для указания того, что для элемента не отображается курсор.
No-drop
Он используется для обозначения того, что перетаскиваемый элемент нельзя перетащить сюда.
s-resize
Это указывает на то, что граничное поле должно быть перемещено вниз. Указывает южное направление.
Row-resize
Он используется для указания того, что размер строки может быть изменен по вертикали.
Se-resize
Он представляет направление юг/восток, что указывает на то, что граничный блок следует перемещать вниз и вправо.
Sw-resize
Он представляет направление юг/запад и указывает, что край прямоугольника должен быть сдвинут вниз и влево.
Wait
Представляет собой песочные часы.
<url>
Указывает источник файла изображения курсора.
w-resize
Он указывает западное направление и означает, что край прямоугольника должен быть смещен влево.
Zoom-in
Он используется для обозначения того, что что-то можно увеличить.
Zoom-out
Он используется для обозначения того, что что-то можно уменьшить.
Пример
<html>
<head>
<title>Document</title>
<style>
body {
background-color: lightblue;
color: green;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div style="cursor: alias">значение alias</div>
<div style="cursor: auto">значение auto</div>
<div style="cursor: all-scroll">значение all-scroll</div>
<div style="cursor: col-resize">значение col-resize</div>
<div style="cursor: crosshair">значение crosshair</div>
<div style="cursor: default">значение default</div>
<div style="cursor: copy">значение copy</div>
<div style="cursor: pointer">значение pointer</div>
<div style="cursor: move">значение move</div>
<div style="cursor: e-resize">значение e-resize</div>
<div style="cursor: ew-resize">значение ew-resize</div>
<div style="cursor: ne-resize">значение ne-resize</div>
<div style="cursor: nw-resize">значение nw-resize</div>
<div style="cursor: n-resize">значение n-resize</div>
<div style="cursor: se-resize">значение se-resize</div>
<div style="cursor: sw-resize">значение sw-resize</div>
<div style="cursor: s-resize">значение s-resize</div>
<div style="cursor: w-resize">значение w-resize</div>
<div style="cursor: text">значение text</div>
<div style="cursor: wait">значение wait</div>
<div style="cursor: help">значение help</div>
<div style="cursor: progress">значение progress</div>
<div style="cursor: no-drop">значение no-drop</div>
<div style="cursor: not-allowed">значение not-allowed</div>
<div style="cursor: vertical-text">значение vertical-text</div>
<div style="cursor: zoom-in">значение zoom-in</div>
<div style="cursor: zoom-out">значение zoom-out</div>
</body>
</html>
