使用CSS使超链接无法被点击

Question

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

- Nec

Answer 1

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

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

cursor:default 属性表示将鼠标指针设置为箭头。如果您想让它像链接一样（使用“手”形鼠标指针），则删除此属性即可。

- mariobgr

---

请注意，在 IE < 11 中，链接仍然可点击，因为 pointer-events 属性在那里不受支持（请参见 http://caniuse.com/#feat=pointer-events）。 - aaronk6

Answer 2

目前，仅使用CSS的解决方案在跨浏览器支持方面存在问题。但是可以使用pointer-events: none;实现。

a.disabled {
  pointer-events: none;
}

不需要将禁用链接光标设置为默认值，因为具有pointer-events：none;的链接已经具有默认光标。

- Rakhat

Answer 3

如果你想要这个用于下拉菜单的父链接，可以这样：

<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属性即可：

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

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

不需要使用任何CSS或JS代码。

如需更多详细信息，您可以访问this页面。

- user33192