我正在尝试使用精灵进行图像翻转,但是由于某些原因,我使用的代码无法更改背景的位置
这是我的代码
的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;}

最佳答案

您的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条规则相同)

您定义的规则意味着a必须位于类top-facebook的另一个元素中。

10-05 20:39
查看更多