Энциклопедия CSS: cursor

CSS: cursor

Тематические порталы

Портал CSS • Портал Веб-разработчиков

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

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

Синтаксис

selector {
  cursor: значение;
}

Пример:

.button {
  cursor: pointer;
}

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

Популярные значения

Чаще всего используются следующие значения cursor:

• default — обычный курсор;
• pointer — курсор для кликабельного элемента;
• text — курсор для текста;
• move — перемещение;
• grab — элемент можно захватить;
• grabbing — элемент уже захвачен;
• not-allowed — действие запрещено;
• wait — ожидание;
• help — справка или подсказка.

Пример:

.link {
  cursor: pointer;
}

.disabled {
  cursor: not-allowed;
}

.text-field {
  cursor: text;
}

Курсоры изменения размера

Для элементов, которые можно растягивать, используют специальные значения:

.resize-x {
  cursor: ew-resize;
}

.resize-y {
  cursor: ns-resize;
}

.resize-corner {
  cursor: nwse-resize;
}

Такие курсоры показывают направление возможного изменения размера.

Живой пример

CSS: свойство cursor

HTMLКопировать

<div class="cursor-demo"> <button class="item cursor-pointer">pointer</button> <button class="item cursor-default">default</button> <button class="item cursor-not-allowed">not-allowed</button> <div class="item cursor-text">text</div> <div class="item cursor-move">move</div> <div class="item cursor-grab">grab</div> </div>

CSSКопировать

.cursor-demo { display: flex; flex-wrap: wrap; gap: 10px; font-family: Arial, sans-serif; background: #f7f9fc; border: 1px solid #d6e0ea; padding: 18px; } .cursor-demo .item { padding: 12px 16px; background: #ffffff; border: 1px solid #d1d5db; border-radius: 6px; color: #1f2937; font: inherit; font-weight: 600; } .cursor-demo .cursor-pointer { cursor: pointer; } .cursor-demo .cursor-default { cursor: default; } .cursor-demo .cursor-not-allowed { cursor: not-allowed; opacity: 0.6; } .cursor-demo .cursor-text { cursor: text; } .cursor-demo .cursor-move { cursor: move; } .cursor-demo .cursor-grab { cursor: grab; }

РезультатСкачать файлом

Пользовательский курсор

Для курсора можно указать собственное изображение и запасное значение:

.custom {
  cursor: url("cursor.png"), pointer;
}

Запасное значение нужно на случай, если изображение не загрузится или не будет поддержано браузером.

Практические советы

Не стоит ставить cursor: pointer; на элементы, которые нельзя нажать. Курсор должен помогать пользователю понять поведение интерфейса, а не вводить его в заблуждение.

Для отключённых кнопок часто используют сочетание cursor: not-allowed; и визуальное приглушение:

.button-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

Источники

• MDN Web Docs: cursor
• W3C: CSS Basic User Interface Module Level 4