2

こんにちは私はこのスプライトを機能させるのにかなりの問題を抱えています。背景画像は表示されず、リンクテキストのみが表示されます。画像への直接パスhttp：// ..を使用しようとしましたが、それでも正しく表示されません。私は助けに感謝します。

CSS：

    #social a {
      text-indent: -9000px;
      display: block;
      background-repeat: no-repeat;
    }

   #youtubelink a {
      background-image: url(social-btns.png);
      background-position: 0px 0px;
      width:46px;
      height:43px;
   }
   #youtubelink a:hover {
      background-position: 0px -43px;
   }
   #googlelink a {
      background-image: url(social-btns.png);
      background-position: 46px 0px;
      width:46px;
      height:43px;
   }
   #googlelink a:hover {
      background-position: 46px -43px;
   }
   #facebooklink a {
      background-image: url(social-btns.png);
      background-position: 92px 0px;
      width:46px;
      height:43px;
   }
   #facebooklink a:hover {
      background-position: 92px -43px;
   }

HTML：

    <div id="social" align="right">

       <a id="youtubelink" href="#">Youtube</a>

       <a id="googlelink" href="#">Google</a>

       <a id="facebooklink" href="#">Facebook</a>

    </div>
4

3 に答える 3

2

アンカー要素の ID があり、それらの子として選択しています。次のようにする必要があります。

a#facebooklink

あなたが使用している方法：

#facebooklink a

アンカーはの子であると見なされ、#facebooklinkすべてのセレクターを変更する必要があります。

于 2013-02-05T16:10:57.777 に答える
0

それ以外の：

#youtubelink a {
  // my css rules

}

そのはず：

a#youtubelink {
      // my css rules
   }

同じことが、3 つのソーシャル リンクすべてに当てはまります。

于 2013-02-05T16:11:15.937 に答える
0

それはあなたのCSSが間違っているからです。「youtubelink」という ID を持つタグ内#youtubelink aのアンカー タグを意味します。あなたが欲しいのは#youtubelink

于 2013-02-05T16:11:22.640 に答える