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

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

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

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

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

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

link

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

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

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

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

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

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

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

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

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