Image Sprite Hover - css

Question

Trying to get the following sprite to work http://reversl.net/sprites/ on hover. Here's my styling
#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;}
I think the problem is the background position of my hover declaration?

Answer 1

http://jsfiddle.net/aFL8A/2/
This seems like a thing you want to achieve, yes?

Answer 2

HTML :
<ul id="social">
<li id="social-facebook"><span>Facebook</span></li>
<li id="social-twitter"><span>Twitter</span></li>
<li id="social-googlePlus"><span>Google+</span></li>
<li id="social-youtube" class="last"><span>Youtube</span></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;}