Отмена подчёркивания при наведении на HTML-элемент

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

Для того чтобы предотвратить подчеркивание ссылок при наведении на них курсором, следует использовать стили CSS. Нужно применить к псевдоклассу a:hover свойство text-decoration: none. Таким образом, подчеркивание будет отменено:

a:hover {
    text-decoration: none; /* Подчеркивания больше нет! */
}

Данный небольшой фрагмент CSS-кода отменяет подчеркивание для всех ссылок на странице.

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

.legend.green-color a:hover {
    text-decoration: none; /* Подчеркивание убрано */
}

В итоге, данный стиль будет применяться только к ссылкам внутри элементов с классом legend.green-color.

Подробности и нюансы

С помощью приведенного выше решения вы сумели улучшить пользовательский интерфейс. Однако CSS предоставляет множество других возможностей для кастомизации.

Эффект “хамелеона”

Если вашим ссылкам свойственно менять цвет при наведении на них, можно управлять этим процессом, устанавливая желаемый цвет:

.legend.green-color a:hover {
    color: green; /* Сохраняем зеленый цвет при наведении */
    text-decoration: none; /* И отменяем подчеркивание */
}

Подробнее об этом расскажет наш спикер на видео

Экспериментирование с встроенными стилями

Встроенный стиль для якорного тега может стать вашим скоростным решением:

<a href="#" style="text-decoration: none;">Ссылка без подчеркивания</a>

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

Столкновение с специфичностью CSS

Иногда правила не работают из-за специфичности CSS. В таких случаях следует применять более конкретные селекторы:

.my-specific-class a:hover {
    text-decoration: none; /* Подчеркивание успешно убрано */
}

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

Давайте обобщим предложенную информацию. До наведения у нас простой круг (🟤). Используя наш CSS-фрагмент кода при наведении, ничего не меняется:

[🟤 (обычное)] ➡️ [🟤🖌️ (наведение)] ➡️ [🟤 (с применением CSS-правила)]

Дополнительные подходы для вашего тулкита

Теперь, когда основная проблема решена, можно рассмотреть некоторые дополнительные возможности.

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

Индивидуальные подчеркивания можно реализовать с использованием псевдо-элементов ::before или ::after:

a::after {
    content: ''; /* Элемент невидим */
    width: 100%;
    height: 2px;
    background: blue;
    transition: background-color 0.3s;
}
a:hover::after {
    background: transparent; /* Элемент становится невидимым при наведении */
}

Значимость доступности

Не забывайте о следующих важных аспектах доступности:

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

Сглаживание переходов

Для создания более плавных визуальных переходов можно использовать свойства text-decoration-color и transition:

a {
    transition: text-decoration-color 0.3s ease-in-out; /* Делаем переход плавным */
}

a:hover {
    text-decoration-color: transparent; /* Подчеркивание исчезает при наведении */
}

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

1. Селектор :hover в CSS — статья с ресурса W3Schools, посвященная псевдоклассу :hover.
2. text-decoration | CSS-Tricks — подробно рассказывает о свойстве text-decoration.
3. text-decoration – CSS | MDN — официальная документация по использованию text-decoration.
4. Псевдоклассы – CSS | MDN — объяснение псевдоклассов, включая :hover.
5. Полное руководство по ссылкам и кнопкам | CSS-Tricks — гайд по оформлению ссылок и кнопок, вчастности эффектов при наведении.
6. Hover.css – Коллекция эффектов на CSS3 для наведения — собрание эффектов наведения на CSS3.
7. Руководство по Sass — рекомендации для написания чистого и легко поддерживаемого CSS/Sass.