Не так давно в css появилось свойство pointer-events, позволяющее контролировать взаимодействие указателя устройств (обычно курсора мыши) с элементами.
Это свойство позволяет нам легко сделать гиперссылку недоступной для нажатия мышкой. Достаточно в свойствах ссылки прописать pointer-events: none.
Общий css код для некликабельной ссылки может быть такой:
1 2 3 4 5 |
a.disabled { pointer-events: none; /* делаем элемент неактивным для взаимодействия */ cursor: default; /* курсор в виде стрелки */ color: #888;/* цвет текста серый */ } |
Теперь если мы укажем у ссылки class disabled как в этом коде
1 |
<a href="Адрес ссылки" class="disabled">Анкор</a> |
она будет недоступна для нажатия мышкой и выглядеть примерно как на картинке. Здесь я еще применяю заливку фона градиентом с помощью инструмента ColorZilla.
Дополнительное описание pointer-events
У этого свойства есть 2 значения:
- none — указатель устройства не может взаимодействовать с элементом;
- auto — устанавливает стандартное взаимодействие указателя с элементом.
Поддержка броузерами
Данное свойство поддерживается большинством броузеров с небольшими исключениями.
- в IE поддерживается, начиная с 11 версии;
- в Opera mini — не поддерживается (текущая версия — 8).
Все получилось. Подскажите, неактивная ссылка поисковиками индексируется как ссылка или воспринимается как текст?
Константин, даже не знаю. Раньше бы сказал, что как ссылку, но сейчас поисковые системы (гугл, прежде всего) уже анализируют файлы стилей, может они и такие приемы отслеживают. Хотя, на текущий момент это вряд-ли, но в будущем вполне вероятно.
Ничего не получилось
lara, вы на работающем сайте делали? Можете прислать ссылку на пример?
pointer-events: none;
Не поддерживается никакими версиями Internet Explorer (Microsoft Edge в том числе), во всех остальных браузерах функционирует нормально.
а можно ли сделать некликабельным плагин погоды gismetio? плагин обращается к скриптам и css на их сайте и все ссылки там, а не в самом коде
Не очень понимаю зачем так «усложнять» если можно убрать — href=»» — и все. А кому надо что бы «пальчик» появлялся — дописать cursor:pointer.
Если менять через стили, то не нужно изменять код сайта, а это бывает в некоторых случаях важно.
Суть в том что это должно остаться ссылкой, и в итоге проиндексироваться гуглом.