Как сделать ссылку неактивной (некликабельной) средствами css?

Не так давно в css появилось свойство pointer-events, позволяющее контролировать взаимодействие указателя устройств (обычно курсора мыши) с элементами.

Это свойство позволяет нам легко сделать гиперссылку недоступной для нажатия мышкой. Достаточно в свойствах ссылки прописать pointer-events: none.

Общий css код для некликабельной ссылки может быть такой:

a.disabled {
pointer-events: none; /* делаем элемент неактивным для взаимодействия */
cursor: default; /*  курсор в виде стрелки */
color: #888;/* цвет текста серый */
}

Теперь если мы укажем у ссылки class disabled как в этом коде

<a href="Адрес ссылки" class="disabled">Анкор</a>

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

link

Дополнительное описание pointer-events

У этого свойства есть 2 значения:

  • none – указатель устройства не может взаимодействовать с элементом;
  • auto – устанавливает стандартное взаимодействие указателя с элементом.

Поддержка броузерами

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

  • в IE поддерживается, начиная с 11 версии;
  • в Opera mini – не поддерживается (текущая версия – 8).
Понравилась статья? Поделись с друзьями:

9 комментариев

  1. Константин 6 лет назад
  2. admin 6 лет назад
  3. lara 5 лет назад
    • admin 5 лет назад
  4. Aleksandr 5 лет назад
  5. алекс 5 лет назад
  6. Евгений 5 лет назад
    • admin 5 лет назад
    • Дмитрий 2 года назад

Добавьте комментарий

* Нажимая на кнопку "Отправить" Вы соглашаетесь с политикой конфиденциальности.