悬停时的替代链接颜色？答案

【问题标题】：Alternate link colors on hover?悬停时的替代链接颜色？
【发布时间】：2017-03-06 08:46:48
【问题描述】：

我已经环顾四周了，但找不到任何可以回答我的问题或确实有效的东西，所以也许你们中的一些人可以为此提供解决方案。

我正在创建一个博客模板，我希望帖子的链接在悬停时显示两种不同的颜色，交替显示。比如，link1 悬停在红色上，link2 悬停在绿色上，link3 再次悬停在红色上，link4 悬停在绿色上，等等。

我怎样才能做到这一点？

编辑：有人删除了我提到我已经研究过的部分，我不知道他们为什么这样做。

这是我在另一个问题中找到的代码，但它不起作用：

body:nth-child(odd) a:hover{ background-color:#dedede; color: #996633; }
body:nth-child(even) a:hover{ background-color:none; color : #FF0000}

另外，如果我的问题激怒了你们中的一些人，我深表歉意。这不是我的本意。不过没必要这么粗鲁。

【问题讨论】：

请提供某种代码，以便我们知道您到目前为止尝试了什么。我们不是来为您编写代码，而是帮助修复您迄今为止编写的内容。
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

【解决方案1】：

试试看

a:hover.altlink{
    color: #FF0000;
}

【讨论】：

【解决方案2】：

为我们提供一些代码以便我们提供帮助，但是有很多方法可以做到这一点，您可以使用 nth-child 选择每个链接并分配不同的颜色，您可以为您的链接添加特定的类，每个链接都有不同的悬停效果。您甚至可以使用您的 CSS 中引用的数据属性。

请提供代码，以便我们提供更多帮助。

.link:nth-child(1):hover {color:blue;}
.link:nth-child(2):hover {color:red;}

或

<a href="#" class="link link--blue"></a>
<a href="#" class="link link--red"></a>

等

【讨论】：

【解决方案3】：

你可以在你的 CSS 中使用 :nth-child selector：

a:nth-child(odd):hover {
color: red;
}

a:nth-child(even):hover {
color: green;
}

【讨论】：