ホバーでソーシャルメディアのアイコンがそれぞれの色に変わります

Question

私は複数のサイトで見たような効果を得たいと思います。ソーシャルメディアのアイコンは一度上に乗った。それぞれがグレースケールからそれぞれの色に切り替わる。例えば;かつてFacebookのアイコンがFacebookの青に変わっていた。 jQuery、HTML、およびCSSを使用してこの効果をどのように達成できますか？

ありがとうございます。 fontawesome.css

今、あなたはホバーで色を変更したい場合は

<span class="fa fa-facebook" style="color:blue"></span> 

よう

Answer 1

あなたが使用することができますが、その後、何かがこのように書きます：

.fa-facebook-square:hover { 
 
     color: #3b5998; 
 
     -o-transition:.5s; 
 
     -ms-transition:.5s; 
 
     -moz-transition:.5s; 
 
     -webkit-transition:.5s; 
 
     transition:.5s; 
 
    } 
 

 
    .fa-facebook-square{ 
 
     -o-transition:.5s; 
 
     -ms-transition:.5s; 
 
     -moz-transition:.5s; 
 
     -webkit-transition:.5s; 
 
     transition:.5s; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<i class="fa fa-facebook-square fa-3x"></i>

ますそれ以外のものも使用できますそれぞれの色のcialアイコンが表示されます。それがあなたのために働くことを期待してください:)

Answer 2

CSS3フィルタを使用し、ホバーの効果を削除することができます。

img { 
 
    width: 150px; 
 
    filter: gray; /* IE6-9 */ 
 
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ 
 
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ 
 
    transition: all 2s; 
 
} 
 

 
img:hover { 
 
    -webkit-filter: grayscale(0); 
 
    filter: none; 
 
}

<img src="http://www.freeiconspng.com/uploads/facebook-announces-clickable-hashtags--resolution-media-17.png">