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

Question

当您为链接指定颜色时，它会自动将此颜色应用于悬停状态。这要求我每次想要更改链接的颜色时指定悬停颜色。我想知道是否有办法改变链接颜色并保持原始悬停颜色？

Answer 1

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

考虑以下示例：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

悬停颜色不是默认红色，因为添加a.classname比a更具体

您可以通过使用不带a前缀的类来解决此问题，例如：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

否则，您可以将!important应用于a:hover颜色，如此a:hover { color: red !important; }但是，不推荐这样做，如果可能，应该避免使用。