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


844

Есть ли способ отключить ссылку с помощью CSS?

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


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

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

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

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

Ответы:


1348

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

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" class="not-active">Link</a>

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

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


36
Кроме того, это не мешает переходить по ссылке, затем вводить.
Джоно

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

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

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

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

140

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
<a href="#" class="disabled">link</a>


Вам может потребоваться установить для дисплея встроенный блок (или что-то другое, чем встроенный).
dev_masta

хорошая, но остерегайтесь поддержки браузера событий указателя (т. е. <IE11): caniuse.com/#search=pointer-events
дорогой

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

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

122

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

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

$('a.current-page').click(function() { return false; });

21
Не забудьте предотвращения поведения по умолчанию: function(ev){ ev.preventDefault(); ev.stopPropagation(); return false;.
ldiqual

5
@Idiqual, return falseделает это
Nickf

1
return falseработает только если действие установлено с помощью hrefатрибута
Джастин

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

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

33

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

  • Не включайте hrefатрибут в свой<a> теги.
  • Используйте JavaScript, чтобы найти элементы привязки с этим class, и удалите их hrefили onclickатрибуты соответственно. JQuery поможет вам в этом (NickF показал, как сделать что-то похожее, но лучше).

30
Это неправильный ответ - указатель-события: нет; CSS может отключить его.
pie6k

Я не думал об этом! Или, может быть, атрибут еще не существовал в 2010 году? В любом случае это правда, что pointer-events: noneможно отключить события мыши. Однако это не отключает основную ссылку. В тесте, который я пробовал в Chrome 81, я все еще могу активировать такую ​​ссылку, нажав на нее и введя клавишу возврата.
Кевин Коннер

31

Bootstrap Disabled Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

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

<button type="button" class="btn btn-link">Link</button>

19

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

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>


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

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

12

Я использовал:

.current-page a:hover {
pointer-events: none !important;
}

И было недостаточно; в некоторых браузерах по-прежнему отображается ссылка, мигает.

Я должен был добавить:

.current-page a {
cursor: text !important;
}

3
Я думаю, что a[disabled]:active { pointer-events: none !important; }лучше.
Масамото Мията


10

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

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

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

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

<a href="//website.com/exact/path">Exact path</a>

[href="https://stackoverflow.com//website.com/exact/path"]{
  pointer-events: none;
}

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

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

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

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

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

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

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

a:not([href^="https://"]){
  pointer-events: none;
}

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

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

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

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

Css может предназначаться для любого атрибута HTML. Может быть rel, target, data-customи так далее ...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

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

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

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

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

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

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

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


Как отключить ссылку с помощью отключенного селектора? например, <a class="test" отключен href="3"> тест </a> a: отключен {курсор: не разрешен; }
ecasper

10

Один из способов сделать это с помощью CSS - это установить CSS на обертку, divкоторую вы настроили исчезать, и что-то еще занимает ее место.

Например:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

С CSS, как

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

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

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


8

Попробуй это:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

6

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

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

.current-page {
  pointer-events: none;
  color: grey;
}
<a href="#" class="current-page">This link is disabled</a>


4

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

$("#myLink").css({ 'pointer-events': 'none' });

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

$("#myLink").css({ 'pointer-events': '' });

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


3
Вам не нужен jQuery для этого, вы можете установить это в CSS самостоятельно.
Брэм Ванрой

3

Вы можете использовать этот CSS:

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}
<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>


2

Спасибо всем, кто опубликовал решения, я объединил несколько подходов, чтобы предоставить более продвинутую 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()

Вот класс coffescript:

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

Привет !!, ответ о CSSнет JSили что-нибудь еще!
Мехди

1

Вы также можете изменить размер другого элемента, чтобы он покрывал ссылки (используя правильный z-index): это «съест» клики.

(Мы обнаружили это случайно, потому что у нас была проблема с внезапно неактивными ссылками из-за «отзывчивого» дизайна, заставляющего H2 покрывать их, когда окно браузера было размером с мобильный телефон.)


Правда, но не для клавиатуры навигации.
AndFisher

1

Демо здесь
Попробуйте это

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

1
Твоя скрипка не работает! Ссылка все еще активна в Chrome.
Мэтт Бирн

Чтобы исправить этот код, поменяйте местами первые два параметра, переданные on (): $ ('html'). On ('click', 'a.Link', function (event) {event.preventDefault ();});
2C-B

1
Привет !!, ответ о CSSнет JSили что-нибудь еще!
Мехди

0

Еще один трюк - поместить над ним невидимый элемент. Это также отключит любые эффекты при наведении

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}

-1

Это можно сделать в CSS

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}
<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

Смотрите на:

Обратите внимание, что text-decoration: none;и color: black;не требуется, но это делает ссылку больше похожей на обычный текст.


-1

pointer-events:none отключит ссылку:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>

1
Это хорошо, но, конечно, не работает, если пользователь использует его клавиатуру :(
gztomas

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.