jquery - 社交媒体图标在悬停时会更改为相应的颜色

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>

您还可以使用其他社交图标及其各自的颜色。希望它对你有用:)