使用 css 使超链接不可点击

Question

我想知道 Css3 中是否有技巧可以使超链接失去其功能，简单地说，禁用点击功能（这样它看起来像一个普通的超链接，但没有功能像一个段落）？

Answer 1

<a href="http://example.com" class="inactive">Link</a>

.inactive {
   pointer-events: none;
   cursor: default;
}

cursor:default 属性是如果你想让光标只是一个箭头。如果您希望它像 link（带有 "hand" 光标），则将其删除。

Answer 2

CSS 唯一的解决方案目前不支持跨浏览器。但是可以使用指针事件：none;

a.disabled {
  pointer-events: none;
}

并且不需要将禁用的 link 光标设置为默认值，因为 links with pointer-events: none; 已经有默认光标。

Answer 3

如果您希望将此用于下拉菜单的父 link，如：

<div class="dropdown">
  <a href="#" class="dropdown-parent">Products</a>

  <div class="dropdown-content">
    <a href="#">Product 1</a>
    <a href="#">Product 2</a>
    <a href="#">Product 3</a>
  </div>
</div>

可能您不想在悬停内容时看到 #，javascript:void(0).

然后只需删除父 href 属性 link:

  <a class="dropdown-parent">Products</a>

这是有效的。（参考：w3.org）

无需为此使用任何 css 或 js 代码。

更多详情，您可以访问this页面。

使用 css 使超链接不可点击

Make a hyperlink unclickable with css

css

hyperlink