如何仅使用 CSS 禁用链接答案

【问题标题】：How to disable a link using only CSS如何仅使用 CSS 禁用链接
【发布时间】：2011-01-06 15:56:05
【问题描述】：

有没有办法使用 CSS 禁用链接？

我有一个名为 current-page 的类，并希望禁用与该类的链接，以便在单击它们时不会发生任何操作。

【问题讨论】：

经过大量谷歌搜索后，我得到了这个问题的完美答案css-tricks.com/pointer-events-current-nav
是否应该使用链接比表示价值更具语义。它不应该通过 CSS 禁用，而是通过使用适用于任何 HTML 元素的hidden 属性来禁用。然后可以使用 CSS 选择例如a[hidden] 锚并相应地设置样式。
@amn 但我认为浏览器不会显示具有隐藏属性的元素，因此样式变得毫无意义。
@user1794469 如果您指示他们使用 CSS，例如使用 display: block 或 display 的其他值，他们会这样做。但hidden 并不总是适用——它适用于不相关的元素，从问题中不清楚为什么应该禁用链接。这可能是 XY 问题的情况。

标签： html css

【解决方案1】：

CSS 无法做到这一点。 CSS 仅用于演示。您的选择是：

不要在<a> 标签中包含href 属性。
使用 JavaScript，找到带有 class 的锚元素，并相应地删除它们的 href 或 onclick 属性。 jQuery 会帮助你（NickF 展示了如何做类似但更好的事情）。

【讨论】：

这不是正确的答案 - 指针事件：无； css 可以禁用它。
我没想到！或者该属性在 2010 年还不存在？无论如何，pointer-events: none 确实可以禁用鼠标事件。但是，它不会禁用底层链接。在我在 Chrome 81 中尝试的测试中，我仍然可以通过点击它并输入返回键来激活这样的链接。

【解决方案2】：

您可以将href属性设置为javascript:void(0)：

.disabled {
  /* Disabled link style */
  color: black;
}

&lt;a class="disabled" href="javascript:void(0)"&gt;LINK&lt;/a&gt;

【讨论】：

@nickf true，但是，这是一个巧妙的解决方案，并且比在设置为禁用时依赖糟糕的默认 IE 样式更好。
我认为它可能比这更复杂一些。这是一个解决方案snook.ca/archives/javascript/clear_links_to_1

【解决方案3】：

CSS 只能用来改变某物的样式。使用纯 CSS 可能做的最好的事情就是完全隐藏链接。

您真正需要的是一些 JavaScript 代码。以下是使用 jQuery 库执行所需操作的方法。

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

【讨论】：

不要忘记防止默认行为：function(ev){ ev.preventDefault(); ev.stopPropagation(); return false;.
@Idiqual, return false 这样做
return false 仅在使用href 属性设置操作时有效
此版本还可用于禁用点击，同时保留其他指针事件，如 :hover 或 :focus！最佳答案！
虽然这适用于所有浏览器，但它只是禁止点击链接。请记住，许多用户习惯于从上下文菜单或使用鼠标中键打开链接。

【解决方案4】：

您可以使用 CSS 执行此操作的一种方法是在包装 div 上设置一个 CSS，您将其设置为消失，并用其他东西代替它。

例如：

<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 是最好的。

【讨论】：

【解决方案5】：

来自this solution：

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

&lt;a href="link.html" aria-current="page"&gt;Link&lt;/a&gt;

有关浏览器支持，请参阅https://caniuse.com/#feat=pointer-events。如果您需要支持 Internet Explorer，有一个解决方法；见this answer。

警告：在 CSS 中对非 SVG 元素使用 pointer-events 是实验性的。该功能曾经是 CSS 3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS 4。

【讨论】：

另外，这并不能避免点击链接然后进入。
如果你想给它一些样式，这样用户就可以看到它被禁用了。给它一些不透明度：.2
现在可以在包括 IE 11 在内的所有现代浏览器中使用。如果您需要对 IE 10 及更低版本的支持，您可以使用 JavaScript polyfill，例如 this one。
重要提示：这只会禁用点击，而不是实际链接本身。您仍然可以使用 tab + enter 来“点击”链接。
pointer-events: none; 的使用并不完美。它还禁用其他事件，例如悬停，这是显示title="…" 或工具提示所必需的。我发现 JS 解决方案更好（使用 event.preventDefault();）以及一些 CSS（cursor: default; opacity: 0.4;）和一个解释为什么链接被禁用的工具提示。

【解决方案6】：

如果您只想在表单上使用 HTML/CSS，另一种选择是使用按钮。设置样式并设置disabled 属性。

例如 http://jsfiddle.net/cFTxH/1/

【讨论】：

【解决方案7】：

Demo here
试试这个

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

【讨论】：

你的小提琴不行！该链接在 Chrome 中仍然有效。
要修复此代码，交换传递给 on() 的前两个参数： $('html').on('click','a.Link',function(event){ event.防止默认（）；}）；
您好！！，答案是关于CSS 而不是JS 或其他任何东西！

【解决方案8】：

您还可以调整另一个元素的大小，使其覆盖链接（使用正确的 z-index）：这将“吃掉”点击。

（我们偶然发现了这一点，因为当浏览器窗口为移动设备大小时，由于“响应式”设计导致 H2 覆盖它们，我们遇到了突然不活动链接的问题。）

【讨论】：

正确，但不适用于键盘导航。

【解决方案9】：

引导禁用链接

<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 Disabled Button，但它看起来像链接

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

【讨论】：

【解决方案10】：

试试这个：

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

【讨论】：

【解决方案11】：

我结合了多种方法来提供一些更高级的disabled 功能。 Here is a gist，代码如下。

这提供了多层次的防御，因此标记为禁用的锚实际上是这样运行的。

使用这种方法，你会得到一个你做不到的锚：

点击
制表符并回车
点击它会将焦点移动到下一个可聚焦元素
它知道锚点是否随后被启用

包含此 CSS 内容，因为它是第一道防线。这假设您使用的选择器是“a.disabled”。
```
a.disabled {
  pointer-events: none;
  cursor: default;
}
```

接下来，实例化此类，例如（使用可选选择器）：

 $ ->
   new AnchorDisabler()

这是 CoffeeScript 类：

 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 JavaScript 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 或其他任何东西！

【解决方案12】：

我搜索了互联网，发现没有比this更好的了。基本上，要禁用按钮单击功能，只需使用 jQuery 添加 CSS 样式，如下所示：

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

然后要再次启用它，请执行此操作

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

在 Firefox 和 Internet Explorer 11 上进行了检查，并且可以正常工作。

【讨论】：

这个不需要jQuery，你可以自己在CSS中设置。
真的需要 JavaScript 吗？

【解决方案13】：

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

&lt;a href="#" class="disabled"&gt;link&lt;/a&gt;

【讨论】：

您可能需要将显示设置为 inline-block（或 inline 以外的其他内容）。
不错，但要注意指针事件浏览器支持（即 caniuse.com/#search=pointer-events
对于风格，请尝试将pointer-events:none; 更改为pointer-events:unset;。然后，可以将光标更改为cursor:not-allowed;。这为用户正在发生的事情提供了更好的线索。截至今天，似乎可以在 FF、Edge、Chrome、Opera 和 Brave 中使用。
@Sablefoste 这在 Chrome 60 中对我不起作用。光标确实是 not-allowed，但链接仍然可以点击。

【解决方案14】：

你可以使用这个 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>

【讨论】：

解释一下。例如，想法/要点是什么？为什么它需要比以前的答案更多的 CSS 内容？这一切真的有必要吗？如果有必要，原因是什么？

【解决方案15】：

pointer-events 属性允许控制 HTML 元素的方式响应鼠标/触摸事件——包括 CSS 悬停/活动状态， JavaScript 中的单击/点击事件，以及光标是否在可见。

这不是您禁用链接的唯一方法，但它是一种很好的 CSS 方法，适用于 Internet Explorer 10（及更高版本）和所有新浏览器：

.current-page {
  pointer-events: none;
  color: grey;
}

&lt;a href="#" class="current-page"&gt;This link is disabled&lt;/a&gt;

【讨论】：

【解决方案16】：

如果你希望它只是 CSS，禁用逻辑应该由 CSS 定义。

要移动 CSS 定义中的逻辑，您必须使用属性选择器。以下是一些示例：

禁用具有精确href的链接：`=`

您可以选择禁用包含特定 href 值的链接，如下所示：

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

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

禁用包含一段路径的链接：`*=`

在这里，任何包含/keyword/in 路径的链接都将被禁用：

<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;
}

浏览器支持

从 Internet Explorer 7 开始支持属性选择器。从 Internet Explorer 9 开始支持 :not() 选择器。

【讨论】：

如何使用禁用选择器禁用链接？例如test a:disabled{ cursor:not-allowed; }

【解决方案17】：

pointer-events:none 将禁用链接：

.disabled {
    pointer-events: none;
}

<a href="#" class="disabled">link</a>

【讨论】：

这很好，但当然，如果用户使用他的键盘就不行:(

【解决方案18】：

可以在 CSS 中实现：

.disabled{
  cursor: default;
  pointer-events: none;
  text-decoration: none;
  color: black;
}

&lt;a href="https://www.google.com" target="_blank" class="disabled"&gt;Google&lt;/a&gt;

参见：

请注意，text-decoration: none; 和 color: black; 不是必需的，但它使链接看起来更像纯文本。

【讨论】：

【解决方案19】：

<a href="#!">1) Link With Non-directed url</a><br><br>

<a href="#!" disabled >2) Link With with disable url</a><br><br>

【讨论】：

标签没有 disabled 属性。
属性a没有禁用属性

【解决方案20】：

我用过：

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

这还不够；在某些浏览器中，它仍然显示链接，闪烁。

我必须补充：

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

【讨论】：

我觉得a[disabled]:active { pointer-events: none !important; }更好。

【解决方案21】：

另一个技巧是在它上面放置一个不可见的元素。这也会禁用任何悬停效果

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

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

【讨论】：

【解决方案22】：

在 HTML 上应用以下类。

.avoid-clicks {
  pointer-events: none;
}

【讨论】：

【解决方案23】：

你也可以试试这个

<style>
.btn-disable {
  pointer-events: none !important;
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.6;
    text-decoration: none;       
}
</style>

<html>
    <head>
        <title>NG</title>
    </head>
    <style>
        .btn-disable {
          pointer-events: none !important;
            color: currentColor;
            cursor: not-allowed;
            opacity: 0.6;
            text-decoration: none;       
        }
        </style>
    <body>
        <div class="btn-disable">
            <input type="button" value="Show">
        </div>
    </body>
</html>

【讨论】：

引导禁用链接

Bootstrap Disabled Button，但它看起来像链接

禁用具有精确href的链接：=

禁用包含一段路径的链接：*=

禁用以下开头的链接：^=

禁用以下结尾的链接：$=

或任何其他属性

组合属性选择器

浏览器支持

禁用具有精确href的链接：`=`

禁用包含一段路径的链接：`*=`

禁用以下开头的链接：`^=`

禁用以下结尾的链接：`$=`