Курсор в CSS

Материал из Викижурнал
Перейти к навигации Перейти к поиску
Приёмы в CSS
Курсор в CSS
Тематические порталы

При помощи CSS можно настроить отображение курсора на странице. Эту настройку можно применить ко всей странице, отдельному боку, ссылке, картинке или ко всем объектам.

CSS настройки курсора

Можно применить данные свойства курсора в CSS:

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

Стандартные СSS свойства курсора

Дадим более развёрнутое определение всем вышеуказанным курсорам.

CSS свойства курсора
Свойство курсора CSS Описание
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

Другие статьи о CSS