CSS Sprite Ссылки не работают

Question

В моем блоге у меня есть два CSS-спрайт-изображения рядом с eachother (потому что они оба имеют разные размеры, а в HTML-коде, который я собираюсь показать вам, оба они могут иметь только 1 набор высота и ширина.), и я не уверен, почему, но один из них не признает атрибут «hover», и ссылки тоже не появляются! И еще одна вещь: она работает на JSFiddle, но не мой сайт: http://aergaergerg.blogspot.com.au/

Вот код, который я использовал для обоих из них: HTML: Для первого спрайта:

<!--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 для него также:

/*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 для второго спрайта:

<!--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 для г t также:

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

Не могли бы вы помочь?

Answer 1

На самом деле нет проблем с вашими спрайтами и кодом.

:hover событие никогда не вызывая на #head-soc2 li a

Потому что #head-soc2 остается позади #head-soc.

Этот CSS трюк будет решить эту проблему,

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