Question

我希望达到我在多个网站上看到的效果。社交媒体图标曾经徘徊过;每次从灰度切换到各自的颜色。例如; Facebook图标曾经因Facebook蓝色变化而徘徊。如何通过使用jQuery，HTML和CSS实现此效果？

提前致谢。

Answer 1

您可以使用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">

Answer 2

您可以使用fontawesome.css

像

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

现在，如果你想在悬停时改变颜色，那么就像这样：

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

您还可以使用其各自颜色的其他社交图标。希望它适合你：）

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

2 个答案: