如何更改<span>懸停的顏色

Question

我已經在我的CSS中獲得社交平臺的div。我想在懸停時更改每個平臺的顏色。他們在<span>。如何到達CSS？這是HTML：

<div class="content"> 


<ul class="social-media-links--platforms platforms inline horizontal"> 
     <li> 
     <a href="https://www.facebook.com/u" target="_blank"> 
     <span class="fa fa-facebook fa-4x"></span> 
     </a> 

      </li> 
     <li> 
     <a href="https://www.instagram.com/u" target="_blank"> 
     <span class="fa fa-instagram fa-4x"></span> 
     </a> 

      </li> 
     <li> 
     <a href="https://www.twitter.com/u" target="_blank"> 
     <span class="fa fa-twitter fa-4x"></span> 
     </a> 

      </li> 
    </ul> 

    </div> 

這是我改變了一切社會聯繫：

.social-media-links--platforms a{ 
    color: #fffff0; 
} 

現在我想添加懸停他們每個人不同的顏色。這不起作用：

.fa.fa-instagram.fa-4x a:hover{ 
    color: black; 
} 

@EDIT

這幾乎是好的，但是當我將鼠標移出的圖標變成了秒的標準鏈接的顏色：不叮無縫的（白色） - >懸停（媒體顏色） - >不懸停（標準鏈接顏色爲一秒） - >再次白色

Answer 1

你的fa級是在你的a元素。試試這個：

a:hover .fa.fa-instagram.fa-4x { 
    color: black; 
}