Как сделать ссылку не кликабельной на сайте css
Перейти к содержимому

Как сделать ссылку не кликабельной на сайте css

  • автор:

Сделать ссылку неактивной с помощью CSS: подробное решение

Свойство pointer-events: none; выключает взаимодействие с ссылкой, а cursor: default; заменяет курсор на стандартный курсор-стрелку, чтобы показать, что ссылка неактивна.

Разбираемся в изменении стилей ссылок

Проработка внешнего вида

Чтобы полностью удалить все признаки активности ссылки, добавьте стили:

Скопировать код

a.no-click < color: currentColor; /* Цвет текста соответствует основному */ text-decoration: none; /* Без подчёркивания */ >

Использование наложения: защита слоями

Без использования JavaScript вы можете перекрыть ссылку другим элементом с более высоким значением z-index :

Скопировать код
Скопировать код

.link-overlay < position: relative; z-index: 1; >.underneath-link

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

Юзабилити: не конфузим пользователя

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

Код для динамики контента и сложных случаев

Задача сохранения неактивности

В одностраничных приложениях или при динамической загрузке контента нужно последовательно использовать стили .no-click , чтобы поддерживать единообразие интерфейса.

Когда CSS взаимодействует с JavaScript

Несмотря на то что фокус данной статьи — CSS, напомним, что JavaScript или jQuery позволяют управлять взаимодействием со ссылками гораздо гибче:

Курсы javascript

Можно ли ссылку сделать не кликабельной при помощи JS? И чтобы при наведении на нее, не было значка пальца, а был значек миши — выделение текста.

25.05.2012, 15:07
Регистрация: 10.11.2011
Сообщений: 96
CSS (text-decoration, color, cursor, outline) + пропишите аттрибут onclick=»return false».
25.05.2012, 16:40
Регистрация: 30.03.2010
Сообщений: 1,813
Можно ссылку сделать не ссылкой и тогда вообще делать ничего не надо будет
__________________
.
27.05.2012, 21:14
Регистрация: 03.02.2012
Сообщений: 67
ссылку не кликабельной и выпадающее меню не выпадающим)
27.05.2012, 21:22
без статуса
Регистрация: 25.05.2012
Сообщений: 8,219
28.05.2012, 13:17
Регистрация: 07.06.2011
Сообщений: 315

не надо так делать =)

28.05.2012, 14:41
без статуса
Регистрация: 25.05.2012
Сообщений: 8,219

tadjik1,
Ерунда — в спецификациях — нет у a обязательных атрибутов

28.05.2012, 15:10
Регистрация: 07.06.2011
Сообщений: 315

да, я ошибся, в спецификации сказано, что при использовании тэга a как закладки в документе нужно использовать атрибут name, без href.
спасибо, Deff.

28.05.2012, 15:26
без статуса
Регистрация: 25.05.2012
Сообщений: 8,219

tadjik1,
Там все вышеприведенные методы — используются для того, чтобы была рука при наведении и выделение css —
a:hover, a:focus, a:active,

Посколь чел как раз просил обратное — ну минималистически так a или span,
но у span возможно придётся еще устанавливать атрибуты цвета и т.д в сотвествии с ссылкой

« Перетаскивание, вращение и изменение размера img | z-index и table »

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужен скрипт Samfer Работа 6 08.04.2012 14:26
Внешняя ссылка на страницу которая находится в IFRAME Модального окна плагина jQuery Андррр jQuery 0 07.12.2011 14:13
Ссылка + картинка + трехцветная рамка + IE greatilya (X)HTML/CSS 7 08.09.2011 08:58
ссылка с fadeIn работает через раз oblomov86 jQuery 1 24.03.2011 17:52
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 11:58

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

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

 a.disabled < pointer-events: none; /* делаем ссылку некликабельной */ cursor: default; /* устанавливаем курсор в виде стрелки */ color: #999; /* цвет текста для нективной ссылки */ >

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

Читать комментарии (15) 14 августа 2014,
71476

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

10 декабря 2014 / Ответить

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

#2 ↑ / codomaza
10 декабря 2014 / Ответить
04 февраля 2015 / Ответить

И зачем такие заморочки, если можно просто прописать ссылку, не добавляя
#4 ↑ / codomaza
04 февраля 2015 / Ответить

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

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

05 августа 2015 / Ответить

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

13 января 2016 / Ответить
29 января 2016 / Ответить

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

09 марта 2016 / Ответить
13 марта 2016 / Ответить

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

13 марта 2016 / Ответить

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

 span < display: block; position: relative; >span:before

#11 ↑ / codomaza
13 марта 2016 / Ответить

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

#12 ↑ / Гость
04 апреля 2016 / Ответить

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

14 октября 2017 / Ответить

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

28 декабря 2017 / Ответить

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

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

18 апреля 2021 / Ответить

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

  1. Информация об IP
  2. Антивирусная проверка
  3. Данные из Whois
  4. Проверить заголовки
  5. Punycode конвертер
  1. Обзоры
  2. Информация о сайтах
  3. Скрипты для сайта
  4. Новости Интернета

© 2011-2024 CodoMaza.com — проверка сайтов
Обратная связь Конфиденциальность

Зарегистрируйтесь, если нет учетной записи

Как сделать ссылку неактивной, как отключить ссылку через ксс

Как сделать ссылку неактивной, как отключить ссылку через ксс

Пример ссылки:

1. Сначала мы присваиваем класс нашей ссылке

.disaled_link /* делаем ссылку некликабельной */

3. При наведении на ссылку меняется внешний вид курсора. Для неактивной ссылки установим дефолтный курсор:

.disaled_link /* устанавливаем курсор в виде стрелки */

4. На этом шаге необходимо отключить изменение внешнего вида ссылки при наведении, например появление подчеркивания, изменение цвета, жирности и другие эффекты, используемые в вашем шаблоне.
Для изменения внешнего вида ссылки при наведении существует атрибут класса «hover»:

.disaled_link:hover
text-decoration:none; /*убираем подчеркивание*/
font-weight:normal;/*устанавливаем толщину шрифта*/

+7(918) 053 84 68
E-mail: info@webstyling.ru

г. Новороссийск, ул. Дзержинского, д. 238
(Пожалуйста, позвоните перед приходом в офис)

© 2009-2024, создание сайтов Новороссийск, Москва, Анапа, Геленджик, Краснодар. Дизайн и разработка сайтов, создание сайтов в в Москве, Новороссийске. Создание одностраничников в Новороссийске. Создание Landing Page в Москве, Новороссийске.

Мы используем файлы cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *