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

Question

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

Answer 1

您可以通过使默认的全球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; }但是，不建议这样做，如果可能，应尽量避免。