CODEWITHSUNDEEP
csssprite
Jedda
Jedda

Reputation: 1017

Image Sprite Hover

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?

Upvotes: 0

Views: 1245

Answers (2)

Marwen Jelloul
Marwen Jelloul

Reputation: 119

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;}

Upvotes: 1

Paulooze
Paulooze

Reputation: 1237

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

Upvotes: 2

Related Questions