html - CSS 中的多个悬停链接

Question

有一排 4 个社交媒体按钮，当我移到它们上方时它们都会悬停。但是，我无法使 tumblr 图片正常工作。就目前而言，在预览中，它会变成 twitter '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”的拼写是否正确。