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

Хотя cursor — базовое CSS-свойство, оно находится в статусе ограниченной доступности в Baseline, что значит: часть значений может не поддерживаться в старых браузерах или иметь особенности в поведении.

Как это работает

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вы задаёте значение свойства cursor для любого элемента, и браузер меняет вид указателя мыши при наведении. Наиболее часто используются:

  • default — обычная стрелка;
  • pointer — рука, обычно на ссылках и кнопках;
  • text — текстовый курсор, как при наборе текста;
  • move — курсор для перемещения элемента;
  • not-allowed — курсор с запрещающим значком.

Пример:

<style>
  a {
    cursor: pointer;
  }
</style>

<a href="#">Кликните сюда</a>

Когда пользователь наведёт мышку на ссылку, указатель сменится на руку — привычный сигнал, что по элементу можно кликнуть.

Другие примеры

Поле с редактированием:

input[type="text"] {
  cursor: text;
}

Неактивная кнопка:

button:disabled {
  cursor: not-allowed;
}

Элемент, который можно перетаскивать:

.draggable {
  cursor: move;
}

Можно использовать и более декоративные значения, например, crosshair, help, wait, а также указать собственное изображение с помощью url() — хотя это уже продвинутый приём и требует тестирования на доступность.

Зачем использовать cursor

  • Повышает предсказуемость интерфейса: пользователь сразу понимает, что элемент интерактивный.
  • Улучшает доступность и удобство навигации.
  • Помогает реализовать UX-мелочи без JavaScript.

Заключение

Свойство cursor — небольшой, но важный инструмент управления поведением интерфейса. Оно делает взаимодействие с сайтом более наглядным и дружелюбным. Даже простой cursor: pointer может существенно улучшить восприятие кнопок и ссылок. Используйте его осознанно и комбинируйте с остальными средствами CSS для создания удобных интерфейсов.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.