Question

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

Answer 1

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

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

如果您希望光标只是一个箭头，则cursor:default属性。如果您希望它像链接一样（使用“手”光标），则将其删除。

Answer 2

CSS only解决方案目前不支持跨浏览器。但是可以使用pointer-events：none;

a.disabled {
  pointer-events: none;
}

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

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>

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

无需为此使用任何CSS或JS代码。

有关详细信息，您可以访问this页。

用css创建一个无法点击的超链接

3 个答案: