CSS свойство cursor

Свойство cursor управляет формой указателя мыши при наведении на элемент. Это визуальная подсказка: форма указателя сообщает пользователю, что произойдёт при клике, перетаскивании или наведении — рука означает «это кликабельно», текстовый курсор означает «здесь можно выделить текст», вращающееся колесо означает «подождите».

На этой странице рассматривается, когда использовать cursor, полный список ключевых значений, сгруппированных по назначению, как загрузить собственное изображение в качестве пользовательского курсора (с синтаксисом <url> и запасными вариантами), а также ловушки доступности, которых следует избегать.

Зачем и когда использовать

Браузеры уже выбирают подходящий курсор для каждого элемента — текстовый луч над абзацем, указывающую руку над ссылкой. Вы переопределяете значение по умолчанию в основном когда:

Вы создаёте пользовательский интерактивный элемент управления (<div> в роли кнопки, перетаскиваемую карточку, ручку сортировки), где браузер не может угадать правильный курсор. Здесь курсор pointer или grab восстанавливает поведение, которого ожидают пользователи.
Вы хотите сигнализировать о состоянии — отключённый элемент с not-allowed или занятая область с wait/progress.
Вам нужен фирменный или игровой указатель через пользовательское изображение.

Используйте свойство экономно и предсказуемо. Курсор, противоречащий поведению (рука pointer над некликабельным текстом или none, скрывающий курсор на обычной странице), сбивает пользователей с толку больше, чем помогает.

Обзор синтаксиса

Значение — это ноль или более разделённых запятыми значений <url>, каждое из которых указывает на файл изображения, за которым следует обязательное ключевое слово-запасной вариант. Браузер пробует каждое изображение по порядку и переходит к следующему, если изображение не загружается; если ни одно не загружается, используется ключевое слово. Именно поэтому ключевое слово в конце обязательно — оно гарантирует, что пользователь всегда увидит какой-нибудь курсор.

/* keyword only */
cursor: pointer;

/* custom image with a keyword fallback (the fallback is required) */
cursor: url("cursor.png"), auto;

/* multiple images tried in order, then the fallback */
cursor: url("cursor.svg"), url("cursor.png"), auto;

Информация

Современные браузеры поддерживают grab, grabbing, zoom-in и zoom-out без вендорных префиксов. Чтобы клики попадали туда, куда ожидают пользователи, сочетайте изменения пользовательского курсора со связанными свойствами pointer-events и user-select.

Начальное значение	auto
Применяется к	Всем элементам.
Наследуется	Да.
Анимируемо	Нет.
Версия	CSS2
DOM Синтаксис	object.style.cursor = "cell";

Все ключевые значения

Все ключевые слова, которые принимает свойство, в одном месте. Наиболее распространённые в повседневной работе с UI: pointer (кликабельно), default (обычная стрелка), text, move, grab/grabbing и not-allowed.

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | <url> | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbing

Пример со значениями auto и help

Пример свойства CSS cursor со значениями auto и help

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .auto {
        cursor: auto;
      }
      .help {
        cursor: help;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Попробуйте сами »

Следующий пример отображает подписанный блок для каждого ключевого значения, чтобы вы могли навести на каждое и увидеть его курсор в своём браузере.

Пример со всеми значениями cursor

Пример свойства CSS cursor со всеми значениями

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
      .auto {
        cursor: auto;
      }
      .default {
        cursor: default;
      }
      .none {
        cursor: none;
      }
      .context-menu {
        cursor: context-menu;
      }
      .help {
        cursor: help;
      }
      .pointer {
        cursor: pointer;
      }
      .progress {
        cursor: progress;
      }
      .wait {
        cursor: wait;
      }
      .cell {
        cursor: cell;
      }
      .crosshair {
        cursor: crosshair;
      }
      .text {
        cursor: text;
      }
      .vertical-text {
        cursor: vertical-text;
      }
      .alias {
        cursor: alias;
      }
      .copy {
        cursor: copy;
      }
      .move {
        cursor: move;
      }
      .no-drop {
        cursor: no-drop;
      }
      .not-allowed {
        cursor: not-allowed;
      }
      .all-scroll {
        cursor: all-scroll;
      }
      .col-resize {
        cursor: col-resize;
      }
      .row-resize {
        cursor: row-resize;
      }
      .n-resize {
        cursor: n-resize;
      }
      .e-resize {
        cursor: e-resize;
      }
      .s-resize {
        cursor: s-resize;
      }
      .w-resize {
        cursor: w-resize;
      }
      .ns-resize {
        cursor: ns-resize;
      }
      .ew-resize {
        cursor: ew-resize;
      }
      .ne-resize {
        cursor: ne-resize;
      }
      .nw-resize {
        cursor: nw-resize;
      }
      .se-resize {
        cursor: se-resize;
      }
      .sw-resize {
        cursor: sw-resize;
      }
      .nesw-resize {
        cursor: nesw-resize;
      }
      .nwse-resize {
        cursor: nwse-resize;
      }
      .grab {
        cursor: grab;
      }
      .grabbing {
        cursor: grabbing;
      }
      .zoom-in {
        cursor: zoom-in;
      }
      .zoom-out {
        cursor: zoom-out;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>

Попробуйте сами »

Пользовательский курсор со значением "url"

Вы можете указать собственное изображение в качестве курсора. Несколько правил обеспечивают надёжность:

Всегда заканчивайте ключевым словом-запасным вариантом (, auto в примере ниже). Без него объявление недействительно и полностью игнорируется.
Используйте маленькие изображения. Браузеры ограничивают пользовательские курсоры примерно до 32×32 пикселей (128×128 пикселей в некоторых); большие изображения молча отбрасываются и используется запасной вариант.
Задайте горячую точку — активную точку клика — с помощью двух необязательных чисел после URL: cursor: url("crosshair.png") 16 16, auto; делает центр изображения 32×32 точкой клика. Если их опустить, используется верхний левый угол.
Используйте формат, поддерживаемый каждым целевым браузером (PNG и SVG безопасны; .cur/.ani работают только в Windows).

Пример свойства cursor со значением url

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <i class="cursor">Icon</i>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание	Попробуйте
auto	Браузер устанавливает курсор автоматически. Это значение по умолчанию.	Попробуйте »
default	Курсор по умолчанию.	Попробуйте »
none	Курсор для элемента не отображается.	Попробуйте »
context-menu	Курсор указывает на доступность контекстного меню.	Попробуйте »
help	Курсор указывает на доступность справки.	Попробуйте »
pointer	Курсор в виде указателя, обозначающего ссылку.	Попробуйте »
progress	Курсор указывает, что программа занята или выполняет задачу.	Попробуйте »
wait	Курсор указывает, что программа занята.	Попробуйте »
cell	Курсор указывает, что можно выбрать ячейку или набор ячеек.	Попробуйте »
crosshair	Курсор отображается в виде перекрестия.	Попробуйте »
text	Курсор указывает на текст, который можно выделить.	Попробуйте »
`<url>`	Разделённый запятыми список URL для пользовательских курсоров.	Попробуйте »
vertical-text	Курсор указывает на вертикальный текст, который можно выделить.	Попробуйте »
alias	Курсор указывает на создание псевдонима чего-либо.	Попробуйте »
copy	Курсор указывает на что-то, что можно скопировать.	Попробуйте »
move	Курсор указывает, что что-то можно переместить.	Попробуйте »
no-drop	Курсор указывает, что перетаскиваемый элемент нельзя сбросить здесь.	Попробуйте »
not-allowed	Курсор указывает, что запрошенное действие не будет выполнено.	Попробуйте »
all-scroll	Курсор указывает, что можно прокручивать в любом направлении.	Попробуйте »
col-resize	Курсор указывает, что столбец можно изменить по горизонтали.	Попробуйте »
row-resize	Курсор указывает, что строку можно изменить по вертикали.	Попробуйте »
n-resize	Курсор указывает, что край блока будет перемещён вверх.	Попробуйте »
s-resize	Курсор указывает, что край блока будет перемещён вниз.	Попробуйте »
e-resize	Курсор указывает, что край блока будет перемещён вправо.	Попробуйте »
w-resize	Курсор указывает, что край блока будет перемещён влево.	Попробуйте »
ns-resize	Курсор указывает двунаправленное изменение размера.	Попробуйте »
ew-resize	Курсор указывает двунаправленное изменение размера.	Попробуйте »
ne-resize	Курсор указывает, что край блока будет перемещён вверх и вправо.	Попробуйте »
nw-resize	Курсор указывает, что край блока будет перемещён вверх и влево.	Попробуйте »
se-resize	Курсор указывает, что край блока будет перемещён вниз и вправо.	Попробуйте »
sw-resize	Курсор указывает, что край блока будет перемещён вниз и влево.	Попробуйте »
nesw-resize	Курсор указывает двунаправленное изменение размера.	Попробуйте »
nwse-resize	Курсор указывает двунаправленное изменение размера.	Попробуйте »
zoom-in	Курсор указывает, что можно увеличить масштаб.	Попробуйте »
zoom-out	Курсор указывает, что можно уменьшить масштаб.	Попробуйте »
grab	Курсор указывает, что что-то можно схватить.	Попробуйте »
grabbing	Курсор указывает, что элемент в данный момент перетаскивается.	Попробуйте »
initial	Устанавливает для свойства значение по умолчанию.	Попробуйте »
inherit	Наследует свойство от родительского элемента.

Доступность и частые ошибки

cursor — это подсказка, а не управление. Он меняет вид указателя, но никак не влияет на поведение элемента. Курсор pointer не делает <div> кликабельным, а not-allowed не отключает кнопку — для этого по-прежнему нужно реальное поведение (onclick, атрибут disabled, роли ARIA).
Не полагайтесь только на курсор для сигнализации отключённого или занятого состояния. Пользователи клавиатуры и сенсорных устройств его не видят. Сочетайте его с видимыми стилями и правильными атрибутами.
Избегайте cursor: none на обычных страницах. Скрытие указателя может дезориентировать пользователей, которые его не находят. Оставьте это для полноэкранных приложений (игры, киоски), самостоятельно управляющих указателем.
Пользовательские изображения могут ухудшить юзабилити, если они низкоконтрастные, слишком большие или имеют смещённую горячую точку, из-за чего пользователи нажимают немного мимо цели. Тестируйте на светлом и тёмном фоне.
cursor наследуется, поэтому значение, установленное на контейнере, применяется к его дочерним элементам, если они его не переопределяют.

Связанные свойства

pointer-events — определяет, реагирует ли элемент на указатель вообще.
user-select — управляет возможностью выделения текста (хорошо сочетается с cursor: text / cursor: default).
:hover — изменяет стили, когда указатель находится над элементом.
caret-color — стилизует мигающий текстовый курсор ввода, совершенно другой вид «курсора».

Практика

Что задаёт CSS свойство 'cursor' в веб-дизайне?

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