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

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

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

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

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

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

link

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

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

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

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

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

  • в IE поддерживается, начиная с 11 версии;
  • в Opera mini — не поддерживается (текущая версия — 8).

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

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

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