0

私が知っている限り、これは常にソーシャルメディアボタンにリンクしている方法ですが、リンクは機能しません。URLはこちら：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-indentyourli.facebookと other のyour を削除し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 に答える