Как получить несколько элементов для изменения цвета при наведении CSS?

Question

Я хотел бы, чтобы несколько элементов определенного элемента меняли цвет, когда пользователь наводил курсор на текст. Пожалуйста, просмотрите мой сайт (http://www.codesrce.com) и наведите указатель мыши на пункт меню «больше». Как вы можете видеть, только больше текста меняет цвета на белый, когда вы наводите на него курсор, но значок меню не отображается. Пожалуйста, просмотрите мой исходный код и, возможно, дайте мне решение моей проблемы. Я хочу иметь его так, чтобы, когда пользователь нависает над <li>, который содержит больше <a> и больше значков <span>, тогда они оба изменят цвета на белый. Любая помощь приветствуется. Благодарю.

Также, если возможно, могу ли я сделать так, чтобы после того, как пользователь нависает над ним и переходит в меню под элементом, заставьте его оставаться белым до тех пор, пока пользователь не покинет меню? (Извините, если моя формулировка сложно)

HTML

<li class="MoreMenuContainer"><a href="#" class="MoreHyperlink">More <span class="MoreMenu"></span></a> 

CSS

.MoreMenu { 

text-decoration: none; 

font-size: 8px; 

color: gray; 

margin-top: 1px; 

-webkit-text-stroke: 0.35px; 

font-family: 'icomoon'; 

speak: none; 

font-style: normal; 

font-weight: 100; 

font-variant: normal; 

text-transform: none; 

text-decoration: none; 

-webkit-transition: color 0.3s ease; 

-moz-transition: color 0.3s ease; 

-ms-transition: color 0.3s ease; 

transition: color 0.3s ease; 

}

.MoreMenu: до {

content: "\e6b8"; 

}

Answer 1

это возможно?

li:hover span, li:hover a { 
    color:White; 
}