css menu hover text color

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>

Вы можете изменить цвет текста, что вы хотите, конечно.