Как управлять видом курсора на сайте

Курсор — небольшая деталь интерфейса, которую пользователь видит постоянно. При наведении на разные элементы сайта он меняет форму: над кнопками превращается в указатель, над текстом — в I‑образную черту. Такое поведение помогает ориентироваться на странице. В Taptop вы можете управлять видом курсора самостоятельно и настраивать его под задачи проекта.

Разберем базовые настройки курсора и покажем, как добавить кастомный вариант с собственным изображением.

Как работает курсор по умолчанию

По умолчанию у всех элементов включен режим auto. Это означает, что браузер сам выбирает подходящий вид курсора:

на ссылках и кнопках отображается указатель

над текстом — I‑образная черта

над обычными блоками — стандартная стрелка

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

Как изменить курсор для текста или другого элемента

Рассмотрим простой кейс: нужно, чтобы при наведении на текст курсор не превращался в I‑образную черту и оставался стандартным.

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

В правой панели Дизайн прокрутите список до параметра Курсор и нажмите на «+».

Откроется список вариантов, которые можно использовать для курсора. Выберите значение «По умолчанию».

После этого перейдите в режим просмотра и проверьте результат. Над выбранным текстом курсор останется стандартным — стрелка, а у других текстовых блоков продолжит работать поведение для текста — курсор в виде I-образной черты.

Таким же образом можно назначать другие варианты курсора для разных элементов — список значений подойдет для большинства интерфейсных задач.

Как добавить кастомный курсор с изображением

Если нужен уникальный эффект, в Taptop можно использовать собственное изображение курсора, например SVG.

Шаг 1. Выберите элемент

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

Шаг 2. Добавьте пользовательское свойство

В правой панели Дизайн пролистайте до опции Пользовательские свойства и нажмите на «+»..

Введите:

название свойства:

cursor

значение:

url(‘путь_к_файлу’)

Чтобы получить путь к файлу:

Откройте хранилище ресурсов и найдите нужное изображение. Например, выберем иконку Linkedin.

Кликните правой кнопкой мыши по изображению и скопируйте относительную ссылку для открытия.

Вставьте ссылку в значение свойства.

Пример: cursor: url(‘/d/linkedin.svg’)

3. В значение пользовательского свойства после пути к файлу добавьте: , auto

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

Пример итогового вида значения:

url(‘/d/linkedin.svg’),auto

Шаг 3. Опубликуйте проект и проверьте работу

Сохраните изменения, опубликуйте страницу и откройте ее в браузере. При наведении на выбранную секцию курсор заменится на ваше изображение.

Рекомендации по работе с кастомными курсорами

Используйте небольшие изображения. Оптимальный размер — около 20×20 пикселей. Слишком крупные иконки могут загружаться с задержкой или не отображаться вовсе.

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

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