Question

因此，当我将鼠标悬停在单色社交图标上时，我试图弄清楚如何使单色社交图标具有不同的颜色。我已经做了一切可以想象的事情并且没有多少运气。提前谢谢你。

.social {
            position: fixed;
            top: -25;
            right: 0;
            padding: 20px;
            z-index:99
            }

    .social ul {
        overflow: auto;
        list-style-type: none;
    }

    .social ul li {
        float: left;
    }

    .social img {
        padding: 7px;
        }

    .social img:hover {
         filter: gray; /* IE6-9 */
         -webkit-filter: grayscale(0%);
         }

<div class="social">
    <ul>
        <li><a href="#" target="blank"><img src="img/social/fb.png"></a></li>
        <li><a href="#" target="blank"><img src="img/social/twitter.png"></a></li>
        <li><a href="#" target="blank"><img src="img/social/soundscloud.png"></a></li>
        <li><a href="#" target="blank"><img src="img/social/spotify.png"></a></li>
        <li><a href="#" target="blank"><img src="img/social/instagram.png"></a></li>
        <li><a href="#" target="blank"><img src="img/social/youtube.png"></a></li>
    </ul>
</div>

Answer 1

尝试使用fontastic.me或任何其他图标字体。

您可以使用图标字体使其变得简单。所以你需要做的就是（仅举例）：

<i class="icon icon-facebook"></i>

风格：

.icon { 
color: red; 
}
.icon:hover { 
color: green; 
}

Answer 2

试试这个：

.social ul li a:hover {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

jsFiddle：http://jsfiddle.net/cmx4uh11/

Answer 3

尝试：

.social li a img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.social li a img:hover {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
}

社会图标悬停

3 个答案: