Question

我已经在悬停div上制作了动画，但只要我附加了超链接，就会出现紫色轮廓。 Codepen：https://codepen.io/forTheLoveOfCode/pen/yPEygM

此刻我将div附加到div的方式如下：

  <a href="https://www.freecodecamp.org/misskatiapunter">
    <div class="communities-link" id="free-code-camp-butn">
      <i class="fa fa-free-code-camp ffc-text"></i>
    </div>
  </a>

覆盖所有超链接样式的最佳方法是什么，以便div上唯一的效果超链接是 - 将其链接到另一个页面。

Answer 1

您正在寻找的是在a标记上设置 color property ，您可能还想设置 text-decoration property 至none：

a {
  color: inherit;
  text-decoration: none;
}

color: inherit表示元素应该从父元素继承颜色（如果已定义）。如果未定义父级颜色，则它将从<body>继承黑色。

color: inherit是最常用的用法，允许您更改颜色，但如果您需要为特定链接覆盖此颜色，则可以使用color: initial，将其设置回默认值blue：

a {
  color: inherit; /* Becomes black */
}
a.blue {
  color: initial; /* Becomes blue, overriding the inheritance from a */
}

text-decoration: none删除了＆＃39;常规＆＃39;超链接。它不会对您的特定用例产生任何影响，但如果您想完全删除下划线，则非常有用。

我已经创建了一个更新的笔，展示了这个 here 。

希望这有帮助！：）

Answer 2

如果您想要删除默认样式，请按照添加样式时的方式进行操作。例如：如果链接带有紫色轮廓，请添加a {border: 0;}属性，或者只要您将其悬停在其中，请执行a:hover{border: 0;}，或者如果单击时显示a:active{border: 0;} < / p>

我可以附加到动画div的超链接而不会获取任何超链接样式吗？

2 个答案: