更新

Question

我正在尝试创建一个社交媒体图标，当您将鼠标悬停在其上时，该图标会旋转并改变颜色。我可以让它旋转，但它不会改变颜色。在此先感谢您的帮助。这是我的代码和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

删除img元素，并将social-roll的宽度和高度设置为您引用的背景图片的大小。

您还应该考虑使用sprite或svgs来避免可能的弹出：）

更新

示例：https://codepen.io/bradleytaunt/pen/RWedge

Answer 2

您正在尝试更改难以执行的图像颜色，我建议使用icon-font一个好的候选人Font-awesome。

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

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

here是一个示例，因此您可以在行动中看到它

试图做一个社交媒体图标，当它在旋转和颜色变化时徘徊

2 个答案:

更新