Сделать ссылку неактивной с помощью CSS: подробное решение
Быстрый ответ
Чтобы сделать ссылку <a>
некликабельной, нужно добавить следующие стили CSS:
.no-click {
pointer-events: none;
cursor: default;
}
Затем назначьте этот класс конкретному элементу:
<a href="#" class="no-click">Привет, я не активна!</a>
Свойство pointer-events: none;
выключает взаимодействие с ссылкой, а cursor: default;
заменяет курсор на стандартный курсор-стрелку, чтобы показать, что ссылка неактивна.
Разбираемся в изменении стилей ссылок
Проработка внешнего вида
Чтобы полностью удалить все признаки активности ссылки, добавьте стили:
a.no-click {
color: currentColor; /* Цвет текста соответствует основному */
text-decoration: none; /* Без подчёркивания */
}
Так <a>
будет выглядеть как обычный текст.
Использование наложения: защита слоями
Без использования JavaScript вы можете перекрыть ссылку другим элементом с более высоким значением z-index
:
<div class="link-overlay">
<a href="#" class="underneath-link">Я недоступна!</a>
</div>
.link-overlay {
position: relative;
z-index: 1;
}
.underneath-link {
position: absolute;
z-index: -1;
}
В этом случае ссылка будет видна, но клик по ней станет невозможным из-за перекрывающего ее div.
Юзабилити: не конфузим пользователя
Не забывайте, что ссылка, которая выглядит неактивной, может сбивать с толку пользователей. Обязательно давайте явные визуальные подсказки о ее состоянии.
Код для динамики контента и сложных случаев
Задача сохранения неактивности
В одностраничных приложениях или при динамической загрузке контента нужно последовательно использовать стили .no-click
, чтобы поддерживать единообразие интерфейса.
Когда CSS взаимодействует с JavaScript
Несмотря на то что фокус данной статьи — CSS, напомним, что JavaScript или jQuery позволяют управлять взаимодействием со ссылками гораздо гибче:
$('a').click(function(event){
if (noDoorHere) {
event.preventDefault();
}
});
Однако добавление JavaScript усложняет проект, что не всегда оправдано для решения простых задач.
Учитываем доступность
Главное — не ухудшить доступность интерфейса после внесенных изменений. В скринридерах или при использовании клавиатурной навигации ссылка должна восприниматься как обычный текст. Возможно, придется удалить атрибут href
или добавить tabindex="-1"
.
Визуализация
Представьте тег <a>
как дверцу, ведущую на другую страницу:
🚪 <- Вход в другой мир
С помощью CSS можно сделать эту дверцу "некликабельной":
a.not-clickable {
pointer-events: none; /* Ручка застряла! */
text-decoration: none; /* Самой двери нет! */
color: inherit; /* Сливается с интерьером */
}
И в итоге мы получаем декоративную картину вместо дверцы:
🖼️ <- Иллюзия, никуда не ведущая.
Улучшения для оптимального UX
Информируем пользователя
Чтобы пользователь понимал, что происходит с неактивными элементами на странице, можно использовать всплывающие подсказки или изменение прозрачности:
a.no-click:hover {
opacity: 0.5; /* Полупрозрачная */
}
a.no-click::after {
content: " (Сейчас закрыто)"; /* Визуальная подсказка */
}
Адаптируемся к устройствам
Проверяем, как работают неактивные ссылки на разных устройствах и разных экранах:
@media (hover: none) {
.no-click {
pointer-events: auto; /* Всё в порядке для тач-устройств */
}
}
Медиазапросы могут помочь настроить поведение для устройств без функции наведения, отключая pointer-events
.
Изящные переходы
Добавляем анимацию перехода для красивой визуализации:
a.no-click {
transition: color 0.3s ease; /* Плавное изменение цвета */
}
a.no-click:hover {
color: grey; /* Серый — цвет остановки */
}
Такие визуальные эффекты делают изменение состояния ссылки более естественным.
Полезные материалы
- pointer-events | CSS-Tricks — полное руководство по свойству
pointer-events
с примерами. - pointer-events – CSS: Cascading Style Sheets | MDN — официальная документация по
pointer-events
. - html – How to disable a link using only CSS – Stack Overflow — обсуждения и ответы на вопрос о том, как с помощью CSS сделать ссылку некликабельной.
- CSS pointer-events property – W3Schools — обучающая статья по
pointer-events
с примерами. - Pointer Events – W3C — информация о pointer events от W3C.
- Tutorial | DigitalOcean — всестороннее руководство по
pointer-events
. - Can I use... Support tables for HTML5, CSS3, etc — данные о совместимости
pointer-events
в различных браузерах.