Question

我似乎无法弄清楚这一点，据我所知，这总是我链接到我的社交媒体按钮的方式，但链接不会工作。这是网址：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;
        }
    }
}

Answer 1

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

li.facebook a {
    display: block;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}

Answer 2

将此添加到您的CSS

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

现在你只有100％的facebook链接，加上你错过display:block，你也在.facebook，.twitter重复一些CSS，和.google类，您可以使用这样的单个规则来避免代码重复：

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

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

社交媒体按钮不会工作

2 个答案: