Как стилизовать конкретный элемент при наведении на CSS?

Question

Этот вопрос предназначен для http://chameleonwebsolutions.com. Мне это нужно, так что, когда вы наводите на себя ссылки на социальные сети, их цвет меняется на более темный зеленый цвет (# 72984a). Я пробовал:

.site-header .fa a:hover { 
color: #72984a !important; 
} 

.fa .fa-facebook-square a:hover { 
color:#72984a !important; 
} 

.social-icons a:hover { 
color:#72984a !important; 
} 

.logo .mobile-social-icons .hidden-tablet a:hover { 
color:#72984a !important; 
} 

.social-icons .hidden-mobile .responsive-header-gutter a:hover { 
color: #72984a !important; 
} 

В таблице стилей, но ни один из них не отображается в инспекторе. Я бы попробовал просто: наведите указатель на таблицу стилей (без класса), но тогда, конечно, это применимо ко всем гиперссылкам. Как я могу стилизовать только ссылки в социальных сетях, когда вы наводите на них курсор? Благодаря!

Answer 1

Квадраты находятся внутри <a> тегов, а не наоборот, как вы пытаетесь сделать. Ваш CSS .fa a:hover применяется к <a> внутри .fa, который является классом для площадей.

Проблема в том, что зеленый цвет применяется к квадратам <i>, а не к <a>. Я не могу проверить свой код, но попробуйте это:

.social-icons i:hover { 
    color: #72984a; 
} 

Или, конечно, это то же самое, но используя селектор класса вместо тега:

.social-icons .fa:hover { 
    color: #72984a; 
} 

Однако, если вы хотите следить за выходящей CSS путь , используйте:

.site-header .fa:hover { 
    color: #72984a; 
} 

Во всех случаях, всегда пытаются применить правильные стили и избегать использования !important.