CSS中的多个Hover链接

Question

有一排4个社交媒体按钮，当我移动到它们上面时，它们都会在上面盘旋。但是，我不能让tumblr的照片工作。现在，在预览版上，推特的linkedin -linkedin- facebook

有什么帮助吗？这是我使用的CSS代码

    .social a:link {
    float: center;
    background-image: url(../img/tumbler.png);
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
    -webkit-transition: background-position .3s ease;
       -moz-transition: background-position .3s ease;
         -o-transition: background-position .3s ease;
            transition: background-position .3s ease;
    margin-left: 2px;

}
.social a:link {
    float: right;
    background-image: url(../img/linkedin.png);
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
    -webkit-transition: background-position .3s ease;
    -moz-transition: background-position .3s ease;
    -o-transition: background-position .3s ease;
    transition: background-position .3s ease;
    margin-left: 2px;

}
.social a:first-child {
    float: right;
    background-image: url(../img/facebook.png);
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
    -webkit-transition: background-position .3s ease;
    -moz-transition: background-position .3s ease;
    -o-transition: background-position .3s ease;
    transition: background-position .3s ease;
    margin-left: 2px;

}
.social a:last-child {
    float: right;
    background-image: url(../img/twitter.png);
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
    -webkit-transition: background-position .3s ease;
       -moz-transition: background-position .3s ease;
         -o-transition: background-position .3s ease;
            transition: background-position .3s ease;

}

干杯

Answer 1

您正在使用完全相同的CSS规则同时执行Tumblr和linkedin。因此，background-image: url(../img/linkedin.png)正在覆盖background-image: url(../img/tumbler.png)。给你的每个社交图标一个单独的类别和风格。

例：

<div class = "social">
    <a class = "twitter"></a>
    <a class = "linkedin"></a>
    <a class = "tumblr"></a>
    <a class = "facebook"></a>
</div>

和css：

.social a:link {
float: right;
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
margin-left: 2px;
}

.social .twitter{
 background-image: url(../img/twitter.png);
}

.social .linkedin{
background-image: url(../img/linkedin.png);
}

.social .tumblr{
background-image: url(../img/tumbler.png);
}

.social .facebook{
background-image: url(../img/facebook.png);
}

此外，检查您是否拼写正确的"tumbler.png“。