html - 为精灵定位背景图像

Question

我正在尝试使用精灵进行图像翻转，但出于某种原因，我使用的代码并没有改变背景的位置

这是我的代码

HTML

<div id="top-social">
<a class="top-facebook" href="#">Facebook</a>
<a class="top-twitter" href="#">Twitter</a>
</div>

CSS

#top-social {
width:90px;
height:65px;
background-color:#FFF;
position:absolute;
z-index:9999;
margin-left:820px;
margin-top:-120px;
padding-top:15px;
padding-left:15px;
}


 #top-social a {
 display:block;
 text-indent: -9999px;
 height: 33px;
 width: 33px;
 background-image:url(images/social-icon-sprites.png);
 background-repeat: no-repeat;
 float:left;
 margin-right:8px;

 }

 #top-social .top-facebook a {background-position: 0px 0px;}
 #top-social .top-facebook a:hover {background-position: 0px -32px;}

 #top-social .top-twitter a {background-position: 32px 32px; }
 #top-social .top-twitter a:hover {background-position: 0px -32px;}

Answer 1

您的 css 规则中有错误：

改变

 #top-social .top-facebook a {background-position: 0px 0px;}
 #top-social .top-facebook a:hover {background-position: 0px -32px;}

到

#top-social a.top-facebook {background-position: 0px 0px;}
#top-social a.top-facebook:hover {background-position: 0px -32px;}

（对于以下其他 2 条规则也是如此）

您定义的规则意味着 aa必须在 class 的另一个元素中top-facebook。