如何为 Bootstrap 字形禁用可点击的 属性？

Question

我在我的网站上添加了 Bootstrap-3 个字形：

<a class="glyphicon glyphicon-wrench"></a>

我主动省略了 href 属性，因为我不需要可点击的 属性（这些图标仅用于装饰）。

图标保持可点击：当鼠标移到图标上时颜色会发生变化，同时出现下划线，给人一种可以点击它们以实现某些目的的错觉...

有没有办法禁用此行为？

Answer 1

添加这个CSS

.glyphicon {
    color: #000 !important;
}
.glyphicon:hover {
    text-decoration: none;
    color:  /* Set your colour if you do not want to use "!important" */;
    cursor: default;
}

您可以使用 !important 设置您的颜色，这会将特异性提高到 100，或者只给 :hover 相同的颜色。我建议后者保持低特异性。

Answer 2

.avoid-clicks {
  pointer-events: none;
}

   

<a class="avoid-clicks">try selecting text through me</a>

使用pointer-events:none看这个例子

Answer 3

不要使用 a，而是使用 span 或 i 之类的东西。按照您喜欢的方式设置 span 样式。

HTML:

<span class="glyphicon glyphicon-wrench"></span>

HTML a 中的图标：

<a href="#"><span class="glyphicon glyphicon-wrench"></span> Link with icon</a>

CSS:

a span { your style }