CSS-свойство cursor определяет тип курсора, который будет отображаться при наведении указателя на элемент.

Значение по умолчанию: auto
Применяется к: Все элементы
Наследование: Да
Анимирование: Нет. Анимируемые свойства
Версия: CSS 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

cursor: [url (путь к файлу),] 0 or more times | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | initial | inherit

Примеры написания кода свойства cursor:

h1 {
    cursor: copy;
}
p {
    cursor: help;
}
a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}

Свойство cursor может содержать разделенный запятыми список пользовательских значений курсора, за которыми должно следовать значение по умолчанию (generic cursor).

Если первое значение cursor указано неправильно или файл не может быть найден, будет использоваться следующий курсор в списке пока не будет найден доступный курсор для отображения. Подробнее в Руководстве по CSS Cursors.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Вид Описание
Общее
auto   Браузер определяет курсор для отображения на основе текущего контекста. Это значение установлено по умолчанию.
default Default Cursor Курсор по умолчанию без учета контекста, обычно стрелка.
none   Курсор не отображается.
initial   Устанавливает это свойство в значение по умолчанию.
inherit   Если указан, связанный элемент принимает вычисленное значение своего родительского элемента cursor.
Links & status Cursors
context-menu Context-menu Cursor Указывает, что доступно контекстное меню.
help Help Cursor Указывает, что доступен текст с подсказкой.
pointer Pointer Cursor Курсор, который указывает на ссылку, обычно указательным пальцем.
progress Progress Cursor Индикатор прогресса. Программа выполняет некоторую обработку, но пользователь все еще может взаимодействовать с интерфейсом (в отличие от wait).
wait Wait Cursor Указывает, что программа занята, и пользователь должен подождать.
Курсоры выбора
cell Cell Cursor Указывает, что ячейка (или набор ячеек) может быть выбран.
crosshair Crosshair Cursor Простое перекрестие. Часто используется для обозначения выделения в растровом изображении.
text Text Cursor Указывает текст, который может быть выбран, как правило, в виде двутавровой балки.
vertical-text Vertical-text Cursor Указывает, что вертикальный текст может быть выбран, как правило, в виде поперечной двутавровой балки.
Drag and Drop курсоры
alias Alias Cursor Указывает, что псевдоним (alias) или ярлык (shortcut) должен быть создан.
copy Copy Cursor Указывает, что что-то может быть скопировано.
move Move Cursor Указывает, что находящийся объект может быть перемещен.
no-drop No-drop Cursor Указывает, что перетаскиваемый элемент не может быть выброшен в текущем местоположении.
not-allowed Not-allowed Cursor Указывает, что что-то не может быть сделано.
Курсоры для ресайза или скролла
all-scroll All-scroll Cursor Указывает, что что-то можно прокрутить в любом направлении (панорама).
col-resize Col-resize Cursor Указывает, что размер столбца можно изменить по горизонтали.
row-resize Row-resize Cursor Указывает, что размер строки можно изменить по вертикали.
n-resize N-resize Cursor Указывает, что грань может быть перемещена вверх (на север).
e-resize E-resize Cursor Указывает, что грань может быть перемещена вправо (восток).
s-resize S-resize Cursor Указывает, что грань может быть перемещена вниз (на юг).
w-resize W-resize Cursor Указывает, что грань может быть перемещена влево (запад).
ne-resize NE-resize Cursor Указывает, что грань может быть перемещена вверх-вправо (северо-восток).
nw-resize NW-resize Cursor Указывает, что грань может быть перемещена вверх-влево (северо-запад).
se-resize SE-resize Cursor Указывает, что грань может быть перемещена вниз-вправо (юго-восток).
sw-resize SW-resize Cursor Указывает, что грань может быть перемещена вниз-влево (юго-запад).
ew-resize EW-resize Cursor Указывает двунаправленный курсор изменения размера.
ns-resize NS-resize Cursor
nesw-resize NESW-resize Cursor
nwse-resize NWSE-resize Cursor
Zoom и Grab курсоры
zoom-in Zoom-in Cursor Указывает, что что-то может быть увеличено.
zoom-out Zoom-out Cursor Указывает, что что-то можно уменьшить.
grab Grab Cursor Указывает, что что-то может быть захвачено (перетащено для перемещения).
grabbing Grabbing Cursor Указывает, что что-то схвачено.

Поддержка браузеров

Свойство cursor поддерживается во всех основных браузерах.

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

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.