Question

尝试在悬停时让以下精灵工作http://reversl.net/sprites/。这是我的造型

#social {margin: 0; padding: 0; width: 212px; height: 48px; background-image: url('images/social-icons.png');}
#social li {margin: 0; padding: 0; list-style-type: none; display: inline; height: 48px; text-align: center; float: left;}
#social a {display: block; height: 48px;}
#social a:hover {background-image: url('images/social-icons.png');}
#social-home {width: 48px;}
#social-home a:hover {background-position: bottom 0;}
#social span {display: none;}

我认为问题是我的悬停声明的背景位置？

Answer 1

http://jsfiddle.net/aFL8A/2/ 这似乎是你想要实现的目标，是吗？

Answer 2

HTML：

<ul id="social">
<li id="social-facebook"><a href="#"><span>Facebook</span></a></li>
<li id="social-twitter"><a href="#"><span>Twitter</span></a></li>
<li id="social-googlePlus"><a href="#"><span>Google+</span></a></li>
<li id="social-youtube" class="last"><a href="#"><span>Youtube</span></a></li>
</ul>

CSS：

#social {margin: 0; padding: 0; width: 212px; height: 48px;}

#social li {
margin: 0 5px 0 0; 
padding: 0; 
list-style-type: none; 
display: inline; 
height: 48px;
float: left;}

#social li.last{
margin-right:0px;
}

#social li a {
background-image: url("images/social-icons.png") left top;
background-repeat : no-repeat;
display: block;
height: 48px;
width: 48px;
}

#social li#social-facebook a{
background-position: left top;
}
#social li#social-facebook a:hover{
    background-position: left -53px;
}

#social li#social-twitter a{
    background-position: -53px top;
}
#social li#social-twitter a:hover {
    background-position: -53px -53px;
}

#social li#social-googlePlus a{
    background-position: -106px top;
}
#social li#social-googlePlus a:hover {
    background-position: -106px -53px;
}

#social li#social-youtube a{
    background-position: -159px top;
}

#social li#social-youtube a:hover {
    background-position: -159px -53px;
}

#social span {display: none;}

图像精灵悬停

2 个答案: