html - 社交图标悬停

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