Сделать ссылку неактивной с помощью 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; /* Серый — цвет остановки */
}

Такие визуальные эффекты делают изменение состояния ссылки более естественным.

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

1. pointer-events | CSS-Tricks — полное руководство по свойству pointer-events с примерами.
2. pointer-events – CSS: Cascading Style Sheets | MDN — официальная документация по pointer-events.
3. html – How to disable a link using only CSS – Stack Overflow — обсуждения и ответы на вопрос о том, как с помощью CSS сделать ссылку некликабельной.
4. CSS pointer-events property – W3Schools — обучающая статья по pointer-events с примерами.
5. Pointer Events – W3C — информация о pointer events от W3C.
6. Tutorial | DigitalOcean — всестороннее руководство по pointer-events.
7. Can I use... Support tables for HTML5, CSS3, etc — данные о совместимости pointer-events в различных браузерах.