【问题标题】：Make multiple hover for same element CSS3为同一元素CSS3进行多次悬停
【发布时间】：2014-10-07 16:56:32
【问题描述】：

寻找一种方法为每个新的鼠标悬停在文本/链接上设置新颜色，仅使用 CSS3。目前悬停只能有最后一个值。

.hover-text
    a:hover   {color:red;}
    a:hover   {color:white;}
    a:hover   {color:blue;}
    a:hover   {color:puple;}

每个新的悬停都必须有不同的颜色。仅使用 CSS3 可以吗？

【问题讨论】：

不，您必须使用 Javascript 等。您不能仅使用 CSS 动态更改每次迭代的颜色。
这在 javascript 中是不可能的，但是您可以使用 javascript 来满足这种需求

标签： css colors hover

【解决方案1】：

你可以为多个元素设置 css3 nth-child psuedo 选择器。

对于单链接多种颜色，您必须使用 javaScript 或 sass

可能有帮助

CSS 悬停效果

 .hover-text > a:nth-child(1):hover {
        background:red;
    }
    
    .hover-text > a:nth-child(2):hover {
        background:white;
    }
    
    .hover-text > a:nth-child(3):hover {
        background:blue;
    }
    
    .hover-text > a:nth-child(4):hover {
        background:purple;
    }

【讨论】：