有一排 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;
}
干杯
最佳答案
你正在使用完全相同的 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”的拼写是否正确。
关于html - CSS 中的多个悬停链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22595418/