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

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

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

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

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

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

link

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

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

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

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

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

  • в IE поддерживается, начиная с 11 версии;
  • в Opera mini — не поддерживается (текущая версия — 8).
Оцените статью
Делаем сайт своими руками
Комментарии: 9
  1. Константин

    Все получилось. Подскажите, неактивная ссылка поисковиками индексируется как ссылка или воспринимается как текст?

    Ответить
  2. Ложников Андрей (автор)

    Константин, даже не знаю. Раньше бы сказал, что как ссылку, но сейчас поисковые системы (гугл, прежде всего) уже анализируют файлы стилей, может они и такие приемы отслеживают. Хотя, на текущий момент это вряд-ли, но в будущем вполне вероятно.

    Ответить
  3. lara

    Ничего не получилось

    Ответить
    1. Ложников Андрей (автор)

      lara, вы на работающем сайте делали? Можете прислать ссылку на пример?

      Ответить
  4. Aleksandr

    pointer-events: none;
    Не поддерживается никакими версиями Internet Explorer (Microsoft Edge в том числе), во всех остальных браузерах функционирует нормально.

    Ответить
  5. алекс

    а можно ли сделать некликабельным плагин погоды gismetio? плагин обращается к скриптам и css на их сайте и все ссылки там, а не в самом коде

    Ответить
  6. Евгений

    Не очень понимаю зачем так «усложнять» если можно убрать — href=»» — и все. А кому надо что бы «пальчик» появлялся — дописать cursor:pointer.

    Ответить
    1. Ложников Андрей (автор)

      Если менять через стили, то не нужно изменять код сайта, а это бывает в некоторых случаях важно.

      Ответить
    2. Дмитрий

      Суть в том что это должно остаться ссылкой, и в итоге проиндексироваться гуглом.

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