Question

得到了一排4个社交媒体按钮，当我移动它们时，它们都悬停着。但是，我无法让tumblr pic工作。按照目前的情况，在预览中，它会发送到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”。

CSS中的多个悬停链接

1 个答案: