css菜单悬停文字颜色

Question

我已经剪切了这个菜单，我很想知道是否有可能编辑CSS代码，以便在透明背景上获得2种颜色（初始和鼠标悬停）的菜单文本，应用css文本main()从一种颜色到另一种颜色。

transition

body {
    font: normal 1.0em Arial, sans-serif;
    background: #A8CBFF;
}

nav {
    font-size: 3.0em;
    line-height: 1.0em;
    color: white;
    width:6em;
    height: 9.0em;
    position:absolute;
    top:0; bottom:0;
    margin:auto;
    left: -4.5em;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    background-color: blue;
    height: 1.0em;
    padding: 0.25em;
    position: relative;
    border-top-right-radius: 0.75em;
    border-bottom-right-radius: 0.75em;
    -webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms;
    transition: transform 500ms, background-color 500ms, color 500ms;
}

nav ul li:nth-child(1) { background-color: #00aced;}
nav ul li:nth-child(2) { background-color: #3b5998;}
nav ul li:nth-child(3) { background-color: #517fa4;}
nav ul li:nth-child(4) { background-color: #007bb6;}
nav ul li:nth-child(5) { background-color: #cb2027;}
nav ul li:nth-child(6) { background-color: #ea4c89;}
nav ul li:hover {
    background-color: #C1232D;
    -webkit-transform: translateX(4.5em);
    transform: translateX(4.5em);
}

nav ul li span {
    display:block;
    font-family: Arial;
    position: absolute;
    font-size:1em;
    line-height: 1.25em;
    height:1.0em;
    top:0; bottom:0;
    margin:auto;
    right: 0.16666666666667em;
    color: #F8F6FF;
}

a {
    color: #FFF;
    text-decoration: none;
}

我通过将<nav> <ul> <li><a href="http://www.twitter.com">Category 1</a></li> <li><a href="http://www.facebook.com">Category 2</a></li> <li><a href="http://www.instagram.com">Category 3</a></li> <li><a href="http://www.instagram.com">Category 4</a></li> <li><a href="http://www.instagram.com">Category 5</a></li> <li><a href="http://www.instagram.com">Category 6</a></li> </ul> </nav>设置为background-color: CodePen here来解决这个问题。但是在这一点上，我不太确定如何处理文本颜色，因为如果我改变transparent;例如，即使鼠标悬停在事件上，我也会获得静态颜色，而不是来自一个人的交叉淡化视觉效果文字颜色到另一个。

Answer 1

将其置于转型中。您只需要将一个转换属性添加到选择a的选择器，而不仅仅是li。具体而言，nav ul li:hover a { color: black; }：

body {
    font: normal 1.0em Arial, sans-serif;
    background: #A8CBFF;
}
nav {
    font-size: 3.0em;
    line-height: 1.0em;
    color: white;
    width:6em;
    height: 9.0em;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    left: -4.5em;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    background-color: blue;
    height: 1.0em;
    padding: 0.25em;
    position: relative;
    border-top-right-radius: 0.75em;
    border-bottom-right-radius: 0.75em;
    -webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms;
    transition: transform 500ms, background-color 500ms, color 500ms;
}
nav ul li:nth-child(1) {
    background-color: #00aced;
}
nav ul li:nth-child(2) {
    background-color: #3b5998;
}
nav ul li:nth-child(3) {
    background-color: #517fa4;
}
nav ul li:nth-child(4) {
    background-color: #007bb6;
}
nav ul li:nth-child(5) {
    background-color: #cb2027;
}
nav ul li:nth-child(6) {
    background-color: #ea4c89;
}
nav ul li:hover {
    background-color: #C1232D;
    -webkit-transform: translateX(4.5em);
    transform: translateX(4.5em);
}
nav ul li:hover a {
    transition: color, 1500ms;
    color: black;
}
nav ul li span {
    display:block;
    font-family: Arial;
    position: absolute;
    font-size:1em;
    line-height: 1.25em;
    height:1.0em;
    top:0;
    bottom:0;
    margin:auto;
    right: 0.16666666666667em;
    color: #F8F6FF;
}
a {
    color: #FFF;
    text-decoration: none;
}

<nav>
    <ul>
        <li><a href="http://www.twitter.com">Category 1</a></li>
        <li><a href="http://www.facebook.com">Category 2</a></li>
        <li><a href="http://www.instagram.com">Category 3</a></li>
        <li><a href="http://www.instagram.com">Category 4</a></li>
        <li><a href="http://www.instagram.com">Category 5</a></li>
        <li><a href="http://www.instagram.com">Category 6</a></li>
    </ul>
</nav>

当然，您可以将文字颜色更改为您想要的颜色。