0

我似乎无法弄清楚这一点，据我所知，这始终是我链接到我的社交媒体按钮的方式，但链接不起作用。这是网址： http: //fantasyaficionado.com/news/

<ul class="social">  

 <li class="facebook"> <a href="https://www.facebook.com/fantasyaficionado">facebook</a> </li>
 <li class="twitter"><a href="https://twitter.com/FanAficionado">twitter</a></li>
 <li class="google"> <a href="http://google.com">google+</a></li>

</ul><!--social-->

所有这些的 css 基本相同：

ul.social{
  float:right;
  li{display:inline-block;}
  margin-right:1%;
}

.twitter{
  text-indent:-9999px;
  background: url('images/mainsprite.png') no-repeat -99px -192px;
  width: 41px;
  height: 41px;
     @include breakpoint(tinyer) {
        background: url('images/mainsprite.png') no-repeat -90px -313px;
        width: 24px;
        height: 24px;
     }
    &:hover{
     cursor:pointer;
     background: url('images/mainsprite.png') no-repeat -99px -239px;
     width: 41px;
     height: 41px;
        @include breakpoint(tinyer) {
          background: url('images/mainsprite.png') no-repeat -90px -341px;
          width: 24px;
          height: 24px;
        }
    }
}
4

2 回答 2

1

删除你text-indent的li.facebook和其他的li，并添加以下 css

li.facebook a {
    display: block;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}
于 2013-09-13T05:11:59.440 回答
1

将此添加到您的 CSS

ul.social >li > a{
    display: block;
    width: 100%;
    height: 100%
}

现在您的 facebook 链接只有 100% 的大小，而且您还缺少,和类display:block中的一些 CSS ，您可以使用这样的单个规则来避免代码重复：.facebook.twitter.google

ul.social > li{
    text-indent: -9999px;
    background: url("images/mainsprite.png") no-repeat;
    width: 41px;
    height: 41px;
}

然后只需为每个班级设置背景位置

于 2013-09-13T05:12:16.123 回答