有什么方法可以使用CSS禁用链接吗？
我有一个叫的类current-page，想禁用与此类的链接，以便在单击它们时不执行任何操作。
如何仅使用CSS禁用链接？
第1677篇《如何仅使用CSS禁用链接？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共12个回答
Another trick is to place a invisible element above it. This will disable any hover effects as well
.myButton{
position: absolute;
display: none;
}
.myButton::after{
position: absolute;
content:"";
height:100%;
width:100%;
top:0;
left:0;
}
pointer-events:none will disable the link:
.disabled {
pointer-events:none;
}
<a href="#" class="disabled">link</a>
You can also size another element so that it covers the links (using the right z-index): That will "eat" the clicks.
(We discovered this by accident because we had an issue with suddenly inactive links due to "responsive" design causing a H2 to cover them when the browser window was mobile-sized.)
you can use this 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>Try this:
<style>
.btn-disable {
display:inline-block;
pointer-events: none;
}
</style>
I used:
.current-page a:hover {
pointer-events: none !important;
}
And was not enough; in some browsers it still displayed the link, blinking.
I had to add:
.current-page a {
cursor: text !important;
}
If you want to stick to just HTML/CSS on a form, another option is to use a button. Style it and set the disabled attribute.
You can set href attribute to javascript:void(0)
.disabled {
/* Disabled link style */
color: black;
}<a class="disabled" href="javascript:void(0)">LINK</a>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 Disabled Button but it looks like link
<button type="button" class="btn btn-link">Link</button>
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}<a href="#" class="disabled">link</a>答案已经在问题的注释中。为了获得更多可见性，我在这里复制此解决方案：
.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-eventsCSS中非SVG元素的使用是实验性的。该功能曾经是CSS3 UI草案规范的一部分，但由于存在许多未解决的问题，因此已推迟到CSS4。
相似问题
问题类别