html - 尝试做一个社交媒体图标，当悬停在旋转上并改变颜色时

Question

我正在尝试创建一个社交媒体图标，当您将鼠标悬停在它上面时，它会旋转并改变颜色。我可以让它旋转，但它不会改变颜色。在此先感谢您的帮助。这是我的代码和 JSFiddle:

JSFiddle

HTML

<li><a target = "_blank" href = "link" class = "social-roll social-roll:hover"><img src = "images/facebook_blue.png" title = "Follow Us on Facebook" alt = "Facebook"></a></li>

CSS

.social-roll {
    background-image: url(images/facebook_blue.png);
    vertical-align: middle;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.social-roll:hover {
    background-image: url(images/facebook_red.png);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}

Answer 1

您正在尝试更改图像的颜色，这很难做到，我建议使用 icon-font一个好的候选人是 Font-awesome .

只需使用链接标签导入它，并为这样的图标使用预设类 <i class="fa fa-facebook"></i>

现在我们可以像改变任何其他字体一样改变颜色.fa-facebook:hover {color:blue;}它将起作用。

here是一个示例，因此您可以看到它的实际效果