Не так давно в css появилось свойство pointer-events, позволяющее контролировать взаимодействие указателя устройств (обычно курсора мыши) с элементами.
Это свойство позволяет нам легко сделать гиперссылку недоступной для нажатия мышкой. Достаточно в свойствах ссылки прописать pointer-events: none.
Общий css код для некликабельной ссылки может быть такой:
Теперь если мы укажем у ссылки class disabled как в этом коде
она будет недоступна для нажатия мышкой и выглядеть примерно как на картинке. Здесь я еще применяю заливку фона градиентом с помощью инструмента ColorZilla.
Дополнительное описание pointer-events
У этого свойства есть 2 значения:
- none – указатель устройства не может взаимодействовать с элементом;
- auto – устанавливает стандартное взаимодействие указателя с элементом.
Поддержка броузерами
Данное свойство поддерживается большинством броузеров с небольшими исключениями.
- в IE поддерживается, начиная с 11 версии;
- в Opera mini – не поддерживается (текущая версия – 8).
Пример CSS кода для создания некликабельной (неактивной) HTML ссылки. Добавляем в CSS код такую запись с классом:
В HTML коде устанавливаем для нективных ссылок класс disabled
Комментировать
СПАСИБО)) простой вариант решения)))
И зачем такие заморочки, если можно просто прописать ссылку, не добавляя
Есть 2 важных преимущества:
- Стилизация неактивной ссылки. Вам всё равно придется использовать CSS стили для того, чтобы скрыть подсветку ссылки при наведении курсора.
- Удобство для разработчика. Данный вариант удобен (необходим) при разработке веб-приложения, так так дает возможность задать стилизацию и быстро найти неактивные ссылки в коде.
Очень быстро нашел нужную информацию, большое спасибо.
Небольшая поправочка, команда pointer-events: none ; подойдёт на блокировки клика по JavaScript’ам с некоторых сайтов, при клике на скрипт идёт пересылка на сайт.
Это решение не будет работать в IE.
Для IE есть следующий метод, он немного хардкодный но работает) Ссылку можно обернуть в span и перекрыть кликабельность ссылки псевдоэлементом на span.
Спасибо! Интересный вариант решения проблемы для IE.
При работе на теме лаерс вордпресс есть возможность управлять CSS но нет возможности править HTML. Есть способ для ИЕ с помощью только CSS?
Спасибо! Лаконично и эффективно.
Подскажите, если в документе 3 ссылки. И надо, чтобы при нажатии на одну из них, остальные исчезали (именно ссылки исчезали, а не содержимое, которое внутри ссылок).
Т.е., есть раскрывающийся доп.текст при нажатии на фразы "да", "нет", "не знаю". Надо чтобы при нажатии допустим на "да", фразы "нет" и "не знаю" пропадали.
У меня есть якорная ссылка, которую я хочу отключить, когда пользователь нажимает на нее. Или удалите тег привязки вокруг текста, но обязательно сохраните текст.
Я могу сделать это легко с помощью кнопки, добавив .attr("disabled", "disabled");
Я успешно добавил отключенное свойство, но ссылка все еще была кликабельной.
Мне действительно все равно, подчеркнут ли текст или нет.
Когда вы нажимаете не на того музыканта, он должен просто добавить «Неправильно», а затем стать неприкосновенным.
Когда вы нажмете, и вы правы, он должен добавить «Awesome», а затем отключить все теги .
18 ответов
Я только что понял, о чем ты просил (надеюсь). Вот уродливое решение
Самый чистый метод – добавить класс с событиями указателя: ни один, если вы хотите отключить щелчок. Это будет функционировать как обычный ярлык.