如何仅使用 CSS 禁用链接
Posted
技术标签:
【中文标题】如何仅使用 CSS 禁用链接【英文标题】：How to disable a link using only 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 问题的情况。
【参考方案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;
<a class="disabled" href="javascript:void(0)">LINK</a>【讨论】：
@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;
<a href="link.html" aria-current="page">Link</a>有关浏览器支持，请参阅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;
<a href="#" class="disabled">link</a>【讨论】：
您可能需要将显示设置为 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;
<a href="#" class="current-page">This link is disabled</a>【讨论】：
【参考方案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;
<a href="https://www.google.com" target="_blank" class="disabled">Google</a>参见：
请注意，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>【讨论】：
以上是关于如何仅使用 CSS 禁用链接的主要内容，如果未能解决你的问题，请参考以下文章
Datepicker 如何仅选择未来日期并禁用 JQuery 和 CSS 中的过去日期？
如何创建一个仅在 chrome 中打开并使用禁用标志的超链接