懸停時社交媒體圖標變爲相應顏色

Question

我想實現我在多個網站上看到的效果。社交媒體圖標曾經懸浮;每個從灰度切換到它們各自的顏色。例如; Facebook的圖標曾經懸浮在Facebook藍色的變化之上。我如何通過使用jQuery，HTML和CSS來實現這種效果？

在此先感謝。

Answer 1

您可以使用fontawesome.css

像

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

現在，如果你想改變懸停顏色，然後事情是這樣的：

.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">