Курсор в 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	Наследует это свойство от своего родительского элемента.