CSS Sprite Links aren't working

Question

In my blog, I have two CSS sprite images next to eachother (because they both have different dimensions, and in the HTML code I'm about to show you they both can only have 1 set height and width.) and I'm not sure why, but one of them isn't recognizing the 'hover' attribute, and the links aren't showing up either! ALSO one more thing: it works on JSFiddle, but not my site: http://aergaergerg.blogspot.com.au/

Here's the code I used for both of them: HTML: For first sprite:

<!--Social Sprite Html-->

<div id="head-soc">
<ul>
<li id="Banner"><a href="http://www.spaceheroesfansite.com/"></a></li>
</ul>
<!--Social Sprite Html http://www.spiceupyourblog.com-->
</div></div>

CSS for it also:

/*Social Sprite Css*/#head-soc ul li {list-style :none; padding: 0px; float: left;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: visible ; height:  423px; width: 776px ;border: 0; background:
 url(http://1.bp.blogspot.com/-o2ur7udOB4U/UqTYmUe5VYI/AAAAAAAADfo/sgHzbl3QFpw/s1600/bannersprite.png)
 no-repeat; display:block;}

#head-soc li#Banner a  {background-position: 0px 0px;}
#head-soc li#Banner a:hover  {background-position: -776px 1px;}

HTML for the second sprite:

<!--Social Sprite Html2-->
<div id="head-soc2">
<ul>
<li id="Button1"><a href="http://www.spaceheroesfansite.com/p/about.html"></a> </li>
<li id="Button2"><a href="http://www.spaceheroesfansite.com/p/promo-codes.html"></a></li>
<li id="Button3"><a href="http://www.spaceheroesfansite.com/p/game-tricks.html"></a></li>
<li id="Button4"><a href="http://www.spaceheroesfansite.com/p/purple-jacket-squad.html"></a></li>
</ul>
<!--Social Sprite Html2--></div>

CSS for it also:

#head-soc2 ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: visible ; height:  69px; width: 204px ;border: 0; background:
 url(http://1.bp.blogspot.com/-o2ur7udOB4U/UqTYmUe5VYI/AAAAAAAADfo/sgHzbl3QFpw/s1600/bannersprite.png)
no-repeat; display: block;}

#head-soc2 li#Button1 a{background-position: -204px -479px;}
#head-soc2 li#Button1 a:hover {background-position: 0px -544px;}

#head-soc2 li#Button2 a {background-position: -204px -479px;}
#head-soc2 li#Button2 a:hover {background-position: 0px -544px;}

#head-soc2 li#Button3 a {background-position: -204px -479px;}
#head-soc2 li#Button3 a:hover {background-position: 0px -544px;}

#head-soc2 li#Button4 a {background-position: -204px -479px;}
#head-soc2 li#Button4 a:hover {background-position: 0px -544px;}

Could anyone help please?

Answer 1

Actually there is no problem with your sprites and code.

:hover event is never triggering on #head-soc2 li a

Because #head-soc2 stays behind #head-soc.

This css trick will fix that problem,

#head-soc2 {
  position:relative;
  z-index: 999999;
}