Свойства CSS позволяют изменить вид курсора для элементов веб-страниц: для изображений, текста, блоков, ссылок и пр.
Вид и CSS-код приведены в таблице ниже. Курсор меняет свою форму в зависимости от того, на какую строку таблицы навели мышкой.
Вид | Значение | Пример (наведите курсор на ячейку) | Браузер |
---|---|---|---|
auto | Браузер самостоятельно определяет вид курсора | Все | |
![]() |
default | style="cursor: default;" | Все |
![]() |
pointer | style="cursor: pointer;" | Все |
![]() |
crosshair | style="cursor: crosshair;" | Все |
![]() |
text | style="cursor: text;" | Все |
![]() |
wait | style="cursor: wait;" | Все |
![]() |
help | style="cursor: help;" | Все |
inherit | Значение наследуется от родительского элемента | Все | |
![]() |
move | style="cursor: move;" | Все |
![]() |
e-resize | style="cursor: e-resize;" | Все |
![]() |
ne-resize | style="cursor: ne-resize;" | Все |
![]() |
nw-resize | style="cursor: nw-resize;" | Все |
![]() |
n-resize | style="cursor: n-resize;" | Все |
![]() |
se-resize | style="cursor: se-resize;" | Все |
![]() |
sw-resize | style="cursor: sw-resize;" | Все |
![]() |
s-resize | style="cursor: s-resize;" | Все |
![]() |
w-resize | style="cursor: w-resize;" | Все |
![]() |
progress | style="cursor: progress;" | Все |
![]() |
col-resize | style="cursor: col-resize;" | IE, Moz, Webkit |
![]() |
not-allowed | style="cursor: not-allowed;" | IE, Moz, Webkit |
![]() |
row-resize | style="cursor: row-resize;" | IE, Moz, Webkit |
![]() |
vertical-text | style="cursor: vertical-text;" | IE, Moz, Webkit |
![]() |
url(uri) | style="cursor: url(mycursor.cur), cursor_type;" | IE, Moz Webkit — ошибка с точкой привязки Opera — применит стандартное значение |
![]() |
all-scroll | style="cursor: all-scroll;" | IE Moz, Webkit — аналогичен «move» |
![]() |
no-drop | style="cursor: no-drop;" | IE Moz, Webkit — аналогичен «not-allowed» |