悬停时社交媒体图标变为相应颜色

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