링크를 가리키면 단 일 아이콘 색상 변경

Question

StackOverflow의 첫 번째 질문.

나는 이것을 알아 내기 위해 내 머리를 파헤 치고있다. 내 메인 메뉴 옵션 (@gabrielpinto.pt)은 텍스트와 아이콘 (FontAwesome)으로 구성됩니다.

필자가 작성한 링크를 가리키면 아이콘의 호버 색을 변경하고 싶습니다.

다음은 메뉴 옵션의 마크 업 중 하나입니다 :

<nav id="site-navigation" class="main-navigation col-md-8" role="navigation"> 
 
    <div class="menu-menu-principal-container"> 
 
    <ul id="menu-menu-principal" class="menu nav-menu"> 
 
     <li id="menu-item-24" class="fa-street-view menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-24"> 
 
     <a href="http://gabrielpinto.pt/">Gabriel Pinto</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

나는 HTML과 CSS 단지 초보자 해요, 나는 다른 규칙의 그러나 어떤 긍정적 인 결과없이 많이 시도했습니다.

예 :

a.fa-street-view:hover li::before { 
color: #bc4676; } 

은 무엇 CSS 규칙이 작동 할 것인가?

Answer 1

이 작동합니다 :

http://jsfiddle.net/gtr45hk7/

편집

내가 예를 만들기 위해 당신의 HTML에 .fa-street-view에 .fa 클래스를 추가 : 여기

.fa-street-view:hover { 
    color: #bc4676; 
} 

은 예입니다 작업.

편집 2

는 귀하의 사이트에서 보았다. 이 시도 :이 링크의 전환을 일치 시키려면

.main-navigation li:hover::before { 
    color: #bc4676; 
} 

, 이것은 트릭 할 수 있습니다

.main-navigation li::before { 
    -webkit-transition: color 0.3s; 
    transition: color 0.3s; 
}