Hey there! I have a little design challenge that I need help with. On my website (), I am trying to make multiple elements of a specific item change color when the user hovers over the text. If you hover over the "more" menu item, you'll notice that only the text changes to white, but not the menu icon. Could you take a look at my source code and suggest a solution? I want both the <li> containing the "more" <a> and the "more" icon <span> to change colors to white on hover. Any assistance would be greatly appreciated. Thank you!
Additionally, if it's possible, can you help me figure out how to keep the color white even after the user moves down to another menu below the element, until they leave the menu entirely? I hope that makes sense! 😅
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:before {
content: "\e6b8";
}