Css не кликабельная область

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

Пример CSS кода для создания некликабельной (неактивной) HTML ссылки. Добавляем в CSS код такую запись с классом:

В HTML коде устанавливаем для нективных ссылок класс disabled

Комментировать

СПАСИБО)) простой вариант решения)))

И зачем такие заморочки, если можно просто прописать ссылку, не добавляя

Есть 2 важных преимущества:

1. Стилизация неактивной ссылки. Вам всё равно придется использовать CSS стили для того, чтобы скрыть подсветку ссылки при наведении курсора.
2. Удобство для разработчика. Данный вариант удобен (необходим) при разработке веб-приложения, так так дает возможность задать стилизацию и быстро найти неактивные ссылки в коде.

Очень быстро нашел нужную информацию, большое спасибо.

Небольшая поправочка, команда pointer-events: none ; подойдёт на блокировки клика по JavaScript’ам с некоторых сайтов, при клике на скрипт идёт пересылка на сайт.

Это решение не будет работать в IE.

Для IE есть следующий метод, он немного хардкодный но работает) Ссылку можно обернуть в span и перекрыть кликабельность ссылки псевдоэлементом на span.

Спасибо! Интересный вариант решения проблемы для IE.

При работе на теме лаерс вордпресс есть возможность управлять CSS но нет возможности править HTML. Есть способ для ИЕ с помощью только CSS?

Спасибо! Лаконично и эффективно.

Подскажите, если в документе 3 ссылки. И надо, чтобы при нажатии на одну из них, остальные исчезали (именно ссылки исчезали, а не содержимое, которое внутри ссылок).

Т.е., есть раскрывающийся доп.текст при нажатии на фразы «да», «нет», «не знаю». Надо чтобы при нажатии допустим на «да», фразы «нет» и «не знаю» пропадали.

Программирую на уровне копипастера) вбил запрос в поисковик, нашел это решение и стал счастливее) Спасибо!

Источник

Можно ли сделать внутри блока ссылки некликабельный элемент?

Код здесь
Нужно сделать, чтобы спаны с классами type-of-work__item-price и type-of-work__item-time были не кликабельны.
pointer-events: none;
не помогает.
Может быть есть еще идеи?

Евгений Эта поправка пришла позже, не хотелось менять структуру. К тому же кликабельным должно быть и изображение (Там картинки не подгрузились)

Можно. Например я такое часто использую, если в адаптивной верстке мне необходимо на ссылку меню справа повесить span, при нажатии на который будет отменено свойства перехода по ссылке и произойдет выпадение подменю. Но делаю я такое исключительно при адаптиве, причем span помещаю скриптом тоже. Делаю это вот таким образом:

//Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню $('.left-menu__list .left-menu__item').append( function(indx, val)< if($(this).find('.left-menu__list').length != 0) return '›'; else return ''; >); //Окончание секции "Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню" //Раскрытие меню при нажатии на "стрелку" $('.arrow').click(function()< $(this).toggleClass('arrow-switch'); $(this).parents('.left-menu__item').find('.left-menu__list').toggleClass('left-menu__list--open'); >); //Окончание секции "Раскрытие меню при нажатии на "стрелку"

.left-menu__list < max-height: 0; -webkit-transition: 800ms ease all; transition: 800ms ease all; >.left-menu__list--open

Источник

Как сделать область недоступной для кликов с помощью CSS?

Скажем, если у меня есть обертка div, которая включает в себя некоторые ссылки и изображения, можно ли как-нибудь отключить ее сразу с помощью только CSS? После просмотра ответов:
Я отказался от идеи, что это можно сделать только с помощью CSS. Плагин jQuery blockUI работает как шарм.

7 ответы

если вы собираетесь использовать jQuery, вы можете легко сделать это с помощью плагина blockUI. . или чтобы ответить на ваш вопрос с помощью CSS, вам нужно будет абсолютно разместить div над содержимым, которое вы хотите заблокировать. просто убедитесь, что абсолютное позиционирование div идет после содержимого, которое нужно заблокировать для целей z-индексации.

извините за все встроенные css. вам нужно будет сделать несколько хороших классов. Кроме того, это было проверено только в Firefox и IE7.

Для этого есть правило CSS, но оно не используется широко из-за поддержки старых браузеров. pointer-events: none;

отлично, работает в ff, safari и chrome, но не в IE и opera. но кто о них заботится. +1 к @NullHead — Каш

Некоторое время он работал в IE11, и я считаю, что то же самое можно сказать и о Opera, поскольку теперь он основан на мигании. — зе

Потому что с .blocked a:after псевдоэлемент, который вы помещаете поверх div, является частью самой ссылки, поэтому он делает всю область div доступной для кликов, а не блокирует ее. — буксир

Вот как это выясняется. Целый div не кликабельна, только ссылка, несмотря на CSS. Видеть jsfiddle.net/HE5wR/26. Кстати, у вас была ошибка в вашем JavaScript с isn’t что преждевременно завершило строку и выдало консольную ошибку. Я думаю, вы говорите, что псевдоэлемент также «горячий» и поэтому действует как ссылка, несмотря на то, что находится поверх исходной ссылки. — Хлоя

Да, псевдоэлемент будет горячим, потому что он является частью элемента ссылки. (И я исправил jsfiddle, спасибо.) — буксир

Источник

Как сделать ссылку некликабельной с помощью CSS

Когда вы создаете веб-страницу, иногда может возникнуть необходимость отключить ссылку на определенном элементе. В этой статье мы расскажем, как сделать ссылку некликабельной с помощью CSS.

Использование CSS свойства pointer-events

Самый простой способ сделать ссылку некликабельной — это использование CSS свойства pointer-events. Данный способ позволяет отключить кликабельность элемента, но не удаляет ссылку. Вот пример кода:

Здесь мы создаем класс «disabled» для ссылки, которую хотим сделать некликабельной, и задаем ему свойство pointer-events со значением «none».

Использование CSS свойства text-decoration

Еще один способ сделать ссылку некликабельной — это убрать ее стандартное оформление. Для этого мы можем использовать CSS свойство text-decoration. Вот пример кода:

Здесь мы задаем класс «disabled» для ссылки и устанавливаем ему значение text-decoration: none, которое убирает подчеркивание ссылки. Мы также устанавливаем свойство cursor: default, чтобы курсор не менял свой вид при наведении на некликабельную ссылку.

Использование атрибута href

Еще один способ сделать ссылку некликабельной — это удалить ее атрибут href. Это приведет к тому, что при нажатии на ссылку ничего не произойдет. Вот пример кода:

Здесь мы добавляем класс «disabled» для ссылки и удаляем атрибут href, задав его значение «#». Это сделает ссылку некликабельной.

В заключение, существует несколько способов сделать ссылку некликабельной с помощью CSS. Выбор зависит от того, что вы хотите добиться и как вы хотите, чтобы ваша страница выглядела.

Источник