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>

你可以改變任何你想要的文字顏色，當然。