css菜单悬停文本颜色

Question

我有这个菜单片段，我有兴趣知道是否有可能编辑CSS代码，以便最终获得一个2种颜色的菜单文本(初始和鼠标上方)的透明背景，应用css文本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:设置为transparent; CodePen在这里来解决这个问题；但在这一点上，我不太确定如何处理文本颜色，因为例如，如果我更改了a {color: red;}，即使在事件的鼠标上也会获得静态颜色，而不是从一种文本颜色到另一种文本颜色的交叉视觉效果。

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>

​

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