Как изменить курсор на сайте: CSS, картинка и проверка

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

Карта результата: что понадобится и что проверить

• Исходное условие: элемент уже работает как ссылка, кнопка или область перетаскивания.
• Ожидаемый результат: форма курсора объясняет действие, а не маскирует его.
• Обязательные шаги: выбрать значение, ограничить область CSS, добавить запасной вариант, проверить наведение.
• Способ проверки: мышь, клавиша Tab, увеличение страницы и второй браузер.
• Не подходит: сенсорный интерфейс без указателя или сайт, где курсор компенсирует неясную разметку.

Правило выбора: сначала семантика элемента, затем системный курсор, и только потом своя картинка. Если действие непонятно без декоративной стрелки, исправьте подпись и разметку.

Выберите системный курсор по действию

Официальный справочник MDN объясняет, что cursor сообщает о доступном действии. Для текста подходит text, для перетаскивания grab, для недоступного действия not-allowed: свойство cursor. Не задавайте pointer всем блокам: рука создаёт ожидание перехода. Если div кликается, проверьте, не должен ли он быть ссылкой или кнопкой.

.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.disabled { cursor: not-allowed; }
.help { cursor: help; }

По теме: Как сделать сайт на роутере: локально и без риска

Подключите картинку с запасным вариантом

Запись содержит url(...), координаты активной точки и обязательное ключевое слово в конце. Браузер использует системное значение, если файл не загрузился. Начинайте с небольшого PNG, прозрачного фона и точно выбранной активной точки.

.canvas {
  cursor: url('/images/pencil-cursor.png') 4 28, crosshair;
}

• Имя и регистр букв в пути совпадают.
• Картинка небольшая; практичный ориентир MDN составляет 32 на 32 пикселя.
• Координаты попадают в кончик указателя.
• В конце указан понятный системный вариант.
• Файл открывается напрямую и не требует входа.

Не ломайте клавиатуру

Курсор виден только пользователю мыши. Фокус клавиатуры должен оставаться заметным, а действие работать через Enter или пробел там, где это предусмотрено элементом. Рекомендации MDN советуют не убирать указатель и контур фокуса без равноценной обратной связи: доступность CSS и JavaScript.

.action:focus-visible {
  outline: 3px solid #b8471f;
  outline-offset: 3px;
}

Проверяемый чек-лист

1. Наведите мышь на целевой элемент и соседний блок: изменение ограничено нужной областью.
2. Переименуйте файл картинки: появляется запасной курсор.
3. Пройдите элементы клавишей Tab: контур фокуса виден.
4. Активируйте ссылку или кнопку с клавиатуры.
5. Откройте второй браузер и телефон: отсутствие своего курсора не мешает задаче.
6. Увеличьте страницу до 200 процентов: указатель не закрывает подпись.

По теме: Как подключить шрифт на сайт: WOFF2, CSS и проверка

Диагностика по симптому

Курсор не меняется: проверьте итоговое правило в инструментах разработчика, точность селектора и путь. Системный курсор появляется вместо картинки: откройте адрес изображения, уменьшите размер и оставьте поддерживаемый формат. Активная точка смещена: исправьте координаты после url().

Курсор меняется на всей странице: правило применено к body или *; перенесите его на конкретный класс. На планшете вид не меняется: это ограничение платформы, поэтому интерфейс обязан объяснять действие текстом и состоянием.

Когда свой курсор не подходит

Не используйте декоративный курсор для оплаты, обязательного согласия и длинного текста. Не скрывайте его через none. Анимация и крупные эффекты отвлекают и могут ухудшать производительность. Эта инструкция относится к указателю мыши, а не к редактору Cursor.

Для основы используйте сайт в одном HTML-файле, затем проверьте мобильную версию и доступность интерфейса.

Частые вопросы

Почему pointer не делает блок кнопкой?

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

Нужно ли менять курсор ссылок?

Обычно нет: браузер уже показывает привычный указатель. Изменение оправдано только отдельной понятной задачей.