Как изменить курсор при наведении на элемент в CSS и HTML

Быстрый ответ

В CSS для превращения курсора в указатель пальца используется свойство cursor со значением pointer применительно к нужному элементу:

.hover-target {
    cursor: pointer;
}

При наведении на элемент с классом .hover-target форма курсора изменится на указатель, что будет служить сигналом о возможности взаимодействия с данным элементом интерфейса.

Точное применение при помощи CSS-селекторов

Применение указателя пальца в качестве курсора требует аккуратного выбора соответствующих элементов, особенно в случае ссылок (<a>):

a:hover {
    cursor: pointer; /* Буквально приглашение нажать: "Кликай сюда!" */
}

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

Использование inline CSS для быстроты

Если необходим быстрый результат без возможности повторного использования, вы можете использовать инлайн CSS:

<a href="https://example.com" style="cursor: pointer;">Отличная ссылка!</a>

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

Создание уникального ощущения с помощью пользовательского курсора

Хотите сделать что-то более оригинальное, чем обычный указатель? Установите свое изображение в качестве курсора, чтобы выделить ваш сайт:

.unique-cursor {
    cursor: url('path-to-image.png'), auto; /* Что насчет единорога в роли курсора? */
}

Помните, что для лучшей чёткости рекомендуется выбирать размер пользовательского курсора в пределах 128x128 пикселей.

Обширное использование – бережно и обдуманно

Установка указателя пальца в качестве курсора для больших контейнеров или всего тега body может сбить с толку пользователей:

/* Настоятельно не рекомендуется */
body {
    cursor: pointer;
}

Неинтерактивные элементы не должны иметь указатель в качестве курсора, так как это идёт вразрез с принципами хорошего UX/UI дизайна.

Доступность дизайна

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

Визуализация

Представьте, как будет выглядеть результат ваших действий:

🖱️ Стандартный курсор: | Банальные, неинтерактивные объекты 👆 Указатель пальца: | Ого! Это интерактивный элемент, нажмите на него!

Меняем вид курсора наведением на кликабельный элемент:

.clickable-element:hover {
    cursor: pointer; /* Как в трансформерах: курсоры-маскировщики! */
}

Элемент «трансформируется» из неактивного в активный:

До наведения: 🖱️ ⟶ 📄 (Просто документ) После наведения: 👆 ⟶ 📄✨ (Документ, который манит прикоснуться)

Индивидуальное управление курсором с помощью JavaScript

В то время как CSS идеально подходит для изменения курсора, иногда может понадобиться использовать JavaScript для динамического управления стилем курсора:

someElement.onmouseover = () => {
    someElement.style.cursor = 'pointer'; /* И снова здравствуй, мистер Указатель! */
};

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

Влияние на производительность

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

Ошибки – главный враг хорошего CSS

Убедитесь, что в вашем CSS-коде нет синтаксических ошибок. Пропущенная точка с запятой может «поломать» весь стиль и вам придется искать причины некорректной работы курсора.

Отладка 101

• Используйте инструменты разработки браузера для проверки корректности применения ваших CSS-правил и выявления случаев их переопределения другими стилями.

• Пересмотрите информацию о специфичности CSS, если необходимо. Лучшее понимание этого позволит найти и решить проблемы с правилами, работающими не так, как предполагалось.

Полезные материалы

1. cursor – CSS: Cascading Style Sheets | MDN — Здесь вы найдете все, что вам нужно знать о свойстве cursor в CSS.
2. Свойство cursor в CSS — W3Schools предлагает понятное объяснение свойства cursor.
3. :hover | CSS-Tricks – CSS-Tricks — Обзор псевдокласса :hover, насыщенный информацией.
4. WebAIM: CSS in Action – Invisible Content Just for Screen Reader Users — Обзор темы доступности и CSS. Важно для восприятия проблематики.
5. Свойство cursor в CSS | HTML Dog — Подробности о свойстве cursor в CSS от А до Я.