Question

I have this page HERE (its for a project). At the top I have a @font-face dingbat mail character after the word “contact” in the top nav. I am trying to get it to transition to the color red on hover along with the word contact but I am not sure how to accomplish this, as of right now its stays black. Also when on the contact page I would like it to stay red like the word contact created with a css class. But anything I try with the transition I can’t get to work on this mail character. Is this possible?
Thank You!

CSS is here

Answer 1

Try using the selector:

nav#main-nav ul li a:hover span {
    text-decoration: overline;
    color: #F00;
}

See if it goes red now.