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 here 解决了这个问题；但在这一点上，我不太确定如何处理文本颜色，因为如果我更改 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>

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

css 菜单悬停文本颜色

css menu hover text color

html

css

onmouseover