Как отключить ссылку, используя только CSS?
есть ли способ отключить ссылку с помощью CSS?
У меня есть класс с именем current-page и хотите, чтобы ссылки с этим классом были отключены, чтобы при их нажатии не происходило никаких действий.
20 ответов
ответ уже есть в комментариях на вопрос. Для большей видимости я копирую данное решение здесь:
для поддержки браузера, см. https://caniuse.com/#feat=pointer-events. Если вам нужна поддержка IE существует обходной путь; см. ответ.
предупреждение: pointer-events в CSS для не-SVG элементов является экспериментальным. Используемая функция быть частью спецификации проекта пользовательского интерфейса CSS3, но из-за многих открытых проблем было отложено до CSS4.
CSS можно использовать только для изменения стиля чего-либо. Лучшее, что вы могли бы сделать с чистым CSS, — это полностью скрыть ссылку.
то, что вам действительно нужно, это javascript. Вот как вы будете делать то, что хотите, используя библиотеку jQuery.
CSS не может этого сделать. CSS предназначен только для презентации. Ваши варианты:
- не входить в своем <a> теги.
- используйте JavaScript, чтобы найти якорные элементы с этим class , и снять их href или onclick атрибуты соответственно. jQuery поможет вам в этом (Никф показал, как сделать что-то подобное, но лучше).
Bootstrap Отключена Ссылка
кнопка Bootstrap отключена, но она выглядит как link
вы можете установить до javascript:void(0)
Если вы хотите придерживаться только HTML / CSS в форме, другой вариант — использовать кнопку. Стиль его и установить .
единственный способ, которым вы могли бы сделать это без CSS, — установить CSS на обертку div, которая заставила ваш a исчезнуть, а что-то еще занять его место.
чтобы фактически отключить A, вам придется заменить его событие click или href, как описано другими.
PS: просто чтобы уточнить, я бы счел это довольно неопрятным решением, и для SEO это тоже не самое лучшее, но я считаю, что это лучшее с чисто на CSS.
если вы хотите, чтобы это был только CSS, логика отключения должна быть определена CSS.
чтобы переместить логику в определениях CSS, вам придется использовать селекторы атрибутов. Вот несколько примеров :
отключить ссылку, которая имеет точный href: =
вы можете отключить ссылки, содержащие определенное значение href, например:
отключить ссылку, содержащую фрагмент пути: *=
здесь любой ссылке содержащий /keyword/ в пути будет отключена
отключить ссылку, которая начинается с: ^=
the [attribute^=value] оператор target атрибут, который начинается с определенного значения. Позволяет отбрасывать веб-сайты и корневые пути.
вы даже можете использовать его для отключения ссылок без https. Например :
отключить ссылку, которая заканчивается: $=
на [attribute$=value] оператор target атрибут, который заканчивается конкретное значение. Может быть полезно отказаться от расширений файлов.
или любой другой атрибут
Css может использовать любой атрибут HTML. Может быть rel , target , data-custom и так далее.
объединение селекторов атрибутов
вы можете связать несколько правил. Допустим, вы хотите отключить все внешние ссылки, но не те, которые указывают на ваш сайт :
или отключить ссылки на pdf-файлы конкретный веб-сайт :
поддержка браузеров
селекторы атрибутов поддерживаются начиная с IE7. :not() селектор с IE9.
на указатель-события свойство позволяет управлять элементами HTML реагируйте на события мыши / касания-включая CSS hover / active states, нажмите / коснитесь события в Javascript, и независимо от того, является ли курсор видимый.
Это не единственный способ вам отключить ссылку, но хороший способ CSS, который работает в IE10+ и всех новых браузерах:
Я искал через интернет и не нашел ничего лучше, чем этой. В основном, чтобы отключить функциональность нажатия кнопки, просто добавьте стиль CSS с помощью jQuery следующим образом:
затем, чтобы включить его снова, сделайте это
проверено на Firefox и IE 11, это сработало.
спасибо всем, кто разместил решения, я объединил несколько подходов, чтобы обеспечить некоторые более продвинутые disabled функциональность. вот суть, и код ниже.
Как сделать ссылку неактивной (некликабельной) средствами css?
Не так давно в css появилось свойство pointer-events, позволяющее контролировать взаимодействие указателя устройств (обычно курсора мыши) с элементами.
Это свойство позволяет нам легко сделать гиперссылку недоступной для нажатия мышкой. Достаточно в свойствах ссылки прописать pointer-events: none.
Общий css код для некликабельной ссылки может быть такой:
Теперь если мы укажем у ссылки class disabled как в этом коде
она будет недоступна для нажатия мышкой и выглядеть примерно как на картинке. Здесь я еще применяю заливку фона градиентом с помощью инструмента ColorZilla.
Дополнительное описание pointer-events
У этого свойства есть 2 значения:
- none – указатель устройства не может взаимодействовать с элементом;
- auto – устанавливает стандартное взаимодействие указателя с элементом.
Поддержка броузерами
Данное свойство поддерживается большинством броузеров с небольшими исключениями.
Как сделать ссылку некликабельной с помощью CSS
Чтобы сделать ссылку некликабельной, и при наведении курсора не появлялся курсор руки, нужно применить к ней следующий стили:
Свойство pointer-events: none; делает ссылку некликабельной, но при наведении мышки на ссылку по прежнему будет отображаться курсор-рука. Чтобы изменить курсор на стандартный нужно указать свойство cursor: default;
После этого ссылка будет отображаться как обычный элемент. Это может понадобиться при вёрстке стилей навигации, когда нужно сделать неактивным ссылку родительского раздела меню или чтобы примитивно ограничить доступ пользователей к странице сайта.
Если вы решили таким способом ограничить доступ к разделу сайта или странице, пользователь всё равно сможет получить доступ посмотрев адрес URL в исходном коде сайте. Также поисковые роботы воспринимают такие ссылки как обычные.