Название документа

Как отключить ссылку, используя только CSS?

Есть ли способ отключить ссылку с помощью CSS? У меня есть класс под названием current-page и хочу, чтобы ссылки с этим классом были отключены, чтобы при нажатии на них не выполнялось никаких действий.

после долгих поисков я получил идеальный ответ на этот вопрос css-tricks.com/pointer-events-current-nav

Должна ли ссылка использоваться или нет, имеет более семантическую, чем презентационная ценность. Его следует отключать не через CSS, а через использование hidden атрибута, применимого к любому элементу HTML. Затем можно использовать CSS, чтобы выбрать, например, a[hidden] якорь и соответствующим образом оформить его.

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

@ user1794469 Они будут, если вы проинструктируете их, с помощью CSS, использовать display: block , например, или какое-либо другое значение для display . Но hidden не всегда применим — он относится к элементам, которые не имеют значения , и из вопроса неясно, почему ссылка должна быть отключена. Это, вероятно, случай проблемы XY.

18 ответов

Ответ уже в комментариях к вопросу. Для большей видимости я копирую это решение здесь:

Для поддержки браузера см. http://caniuse.com/#search=pointer-events *, если вам нужно поддерживать IE, есть обходной путь, см. этот ответ.

Предупреждение. Использование pointer-events в CSS для элементов, отличных от SVG, является экспериментальным. Эта функция была частью спецификации CSS-интерфейса CSS3, но из-за многих открытых проблем была отложена до CSS4. *

Вы всегда можете использовать polyfill для поддержки IE, мне часто нужны события указателя: не часто.

Если бы вы немного его стилизовали, чтобы пользователь мог видеть, что он отключен. Дайте ему некоторую непрозрачность: .2

Теперь это работает во всех современных браузерах, включая IE 11. Если вам нужна поддержка IE 10 и ниже, вы можете использовать JavaScript, такой как этот .

Важное примечание: при этом отключается только нажатие, а не сама ссылка. Вы все еще можете использовать Tab + Enter, чтобы «нажать» ссылку.

Использование pointer-events: none; не идеален Он также отключает другие события, такие как наведение, которое требуется для отображения title=»…» или всплывающих подсказок. Я обнаружил, что решение JS лучше (с использованием event.preventDefault(); ) вместе с некоторыми CSS ( cursor: default; opacity: 0.4; ) и всплывающей подсказкой, объясняющей, почему ссылка отключена.

Также стоит изменить цвет текста и подчеркнуть его, чтобы он больше не выглядел как ссылка: color:#000; text-decoration: none;

По крайней мере, в Chrome свойство «курсор» не имеет смысла при использовании «указатель-события: нет». AFAIK, это просто игнорируется. Попробуйте, например, установить «указатель-события: нет; курсор: не разрешен;», и курсор будет оставаться по умолчанию все время.

Любой способ изменить курсор, если я использую pointer-events: none; , Я пытаюсь использовать cursor: not-allowed; но это не работает.

Кроме того, это не предотвращает пузыри, поэтому, если у вас есть элемент под ним, он все еще срабатывает

Это именно то, что я искал: pointer-events: none; Это был отсутствующий мир в моей загадке. Большое спасибо.

CSS можно использовать только для изменения стиля чего-либо. Лучшее, что вы могли бы сделать с помощью чистого CSS, — это полностью скрыть ссылку.

Вам действительно нужен javascript. Вот как вы будете делать то, что хотите, используя библиотеку jQuery.

$('a.current-page').click(function() < return false; >); 

Не забывайте предотвращать поведение по умолчанию: function(ev)< ev.preventDefault(); ev.stopPropagation(); return false; ,

Также эта версия может использоваться для отключения щелчков при сохранении других событий указателя, таких как: hover или: focus! Топ ответ!

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

хорошая, но остерегайтесь поддержки браузера событий указателя (например,

Для стиля попробуйте изменить pointer-events:none; на pointer-events:unset; , Затем курсор можно изменить на cursor:not-allowed; , Это дает лучшее представление о том, что происходит с пользователем. Кажется, работает в FF, Edge, Chrome, Opera и Brave с сегодняшнего дня.

@Sablefoste Это не работает для меня в Chrome 60. Курсор действительно not-allowed , но ссылка остается активной.

CSS не может этого сделать. CSS предназначен только для презентации. Ваши варианты:

Отключенная ссылка Bootstrap

Кнопка отключения Bootstrap, но она выглядит как ссылка

Вы можете установить атрибут href на javascript:void(0)

@nickf true, однако, это изящное решение, и оно лучше, чем полагаться на плохой стиль IE по умолчанию, если он отключен.

Я думаю, что это может быть немного сложнее, чем это. Вот решение snook.ca/archives/javascript/clear_links_to_1

Если вы хотите придерживаться только HTML/CSS в форме, другой вариант — использовать кнопку. Стиль его и установите атрибут disabled .

Только так, как вы могли бы сделать это без CSS, было бы установить CSS на обертке div, который заставил бы вас исчезнуть и что-то еще заняло бы место.

.disabled a.toggleLink < display: none; >span.toggleLink < display: none; >.disabled span.toggleLink

Чтобы фактически отключить A, вам нужно будет заменить его событие click или href, как описано другими.

PS: Просто уточнить, я бы счел это довольно неопрятным решением, а для SEO это тоже не самое лучшее, но я считаю, что это лучше всего с чисто CSS.

Свойство указатель-события позволяет контролировать, как элементы HTML реагировать на события мыши/касания — включая наведение/активные состояния CSS, нажмите/коснитесь событий в Javascript, и будет ли курсор видны.

Этот не единственный способ, которым вы отключили ссылку, но хороший способ CSS, который работает в IE10 + и всех новых браузерах:

Я искал через Интернет и нашел не лучше this. В основном, чтобы отключить функциональность нажатия кнопок, просто добавьте стиль CSS, используя jQuery, например:

Затем, чтобы снова включить его, выполните

Проверено на Firefox и IE 11, это сработало.

Если вы хотите, чтобы это был только CSS, логика отключения должна определяться CSS.

Чтобы переместить логику в определениях CSS, вам придется использовать селектора атрибутов. Вот несколько примеров:

Отключить ссылку с точным href: =

Вы можете отключить ссылки, которые содержат определенное значение href, например:

Отключите ссылку, содержащую фрагмент пути: *=

Здесь любая ссылка, содержащая /keyword/ в пути, будет отключена

Отключите ссылку, которая начинается с: ^=

Оператор [attribute^=value] нацелен на атрибут, начинающийся с определенного значения. Позволяет отбрасывать веб-сайты и корневые пути.

Вы можете даже использовать его для отключения ссылок, отличных от https. Например:

Отключить ссылку, которая заканчивается на: $=

Оператор [attribute$=value] нацелен на атрибут, который заканчивается определенным значением. Может быть полезно отменить расширения файлов.

Или любой другой атрибут

Css может настраивать любой атрибут html. Может быть rel , target , data-custom и так далее.

Объединение селекторов атрибутов

Вы можете связать несколько правил. Скажем, что вы хотите отключить любую внешнюю ссылку, но не те, которые указывают на ваш сайт:

Или отключить ссылки на pdf файлы определенного веб-сайта:

Поддержка браузера

Селектора атрибутов поддерживаются с IE7. :not() селектор с IE9.

Благодаря всем, кто разместил решения, я объединил несколько подходов для обеспечения более продвинутых функциональных возможностей disabled . Вот суть, и код ниже.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such. Using this approach, you get an anchor that you cannot: - click - tab to and hit return - tabbing to it will move focus to the next focusable element - it is aware if the anchor is subsequently enabled 1. Include this css, as it is the first line of defense. This assumes the selector you use is 'a.disabled' a.disabled < pointer-events: none; cursor: default; >2. Next, instantiate this class such as (with optional selector): $ -> new AnchorDisabler() 

class AnchorDisabler constructor: (selector = 'a.disabled') -> $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus) isStillDisabled: (ev) => ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ### target = $(ev.target) return true if target.hasClass('disabled') return true if target.attr('disabled') is 'disabled' return false onFocus: (ev) => ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ### return unless @isStillDisabled(ev) focusables = $(':focusable') return unless focusables current = focusables.index(ev.target) next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0)) next.focus() if next onClick: (ev) => # disabled could be dynamically removed return unless @isStillDisabled(ev) ev.preventDefault() return false onKeyup: (ev) => # 13 is the js key code for Enter, we are only interested in disabling that so get out fast code = ev.keyCode or ev.which return unless code is 13 # disabled could be dynamically removed return unless @isStillDisabled(ev) ev.preventDefault() return false 

Источник

Всплывающее окно на HTML и CSS

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

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

Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert().

Всплывающее окно

Первым шагом создания всплывающего окна является создание элемента (или любого другого элемента) и его оформление:

     .okno  
Всплывающее окошко!
   

Этот и будет использоваться в качестве всплывающего окна. Теперь мы его скрываем с помощью значения none свойства display и добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:

     #okno < width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; >#okno:target  
Всплывающее окошко!
 Вызвать всплывающее окно   

Используя псевдо-класс :target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента сменится с none на block .

Теперь надо расположить посередине страницы, чтобы он стал похож на всплывающее окно. Делаем его абсолютно позиционированным и центрируем его по вертикали и горизонтали:

Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент внутри элемента :

     #main < display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; >#okno < width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; >#main:target   
Всплывающее окошко!
  Вызвать всплывающее окно   

На этом создание простого всплывающего окна закончено.

Модальное окно

Для создания всплывающего модального окна, берём элемент , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:

     #okno < width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; >#okno:target  
Всплывающее окошко!
 Вызвать всплывающее окно   

Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему и оформив:

     #okno < width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; >#okno:target .close < display: inline-block; border: 1px solid #0000cc; color: #0000cc; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; font-size: 14pt; cursor:pointer; >.close:hover  
Всплывающее окошко! 
Закрыть окно 
 Вызвать всплывающее окно   

Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный :

Позиционируем родительский и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.

У дочернего убираем display: none; (он больше не нужен, так как родительский будет скрывать всё, что находится внутри него). В итоге родительский теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:

     #zatemnenie < background: rgba(102, 102, 102, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; >#okno < width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #fff; >#zatemnenie:target .close < display: inline-block; border: 1px solid #0000cc; color: #0000cc; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; font-size: 14pt; cursor:pointer; >.close:hover  
 
Всплывающее окошко! 
Закрыть окно 
 
 Вызвать всплывающее окно   

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник