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
   }

这同样适用于您的所有三个社交链接。

于 2013-02-05T16:11:15.937 回答
0

那是因为你的 CSS 是错误的。表示标签内#youtubelink a的锚标签，其 id 为“youtubelink”。你想要的是一个#youtubelink

于 2013-02-05T16:11:22.640 回答