更改链接颜色时如何保持原始悬停颜色？

阿尔瓦雷斯

当您为链接指定颜色时，它也会自动将这种颜色应用于悬停状态。每次我想更改链接的颜色时，都需要指定一个悬停颜色。我想知道是否可以更改链接颜色并保持原始悬停颜色吗？

阿齐兹

您可以通过使默认全局a:hover比彩色链接更具体来实现。

考虑以下示例：

a { color: blue }
a:hover { color: red; }

a.color1 { color:green; }
a.color2 { color:orange; }
a.color3 { color:purple; }

<ul>
  <li><a href="#">Default</a></li>
  <li><a href="#" class="color1">Green Link</a></li>
  <li><a href="#" class="color2">Orange Link</a></li>
  <li><a href="#" class="color3">Purple Link</a></li>
</ul>

悬停颜色将不是默认的红色，因为添加a.classname比a

您可以通过使类没有a前缀来解决此问题，如下所示：

a { color: blue }
a:hover { color: red; }

.color1 { color:green; }
.color2 { color:orange; }
.color3 { color:purple; }

<ul>
  <li><a href="#">Default</a></li>
  <li><a href="#" class="color1">Green Link</a></li>
  <li><a href="#" class="color2">Orange Link</a></li>
  <li><a href="#" class="color3">Purple Link</a></li>
</ul>

否则，您可以像这样!important使用a:hover颜色，a:hover { color: red !important; }但是，不建议这样做，如果可能，应避免使用。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。