: 호버 상태가 작동하지 않습니다.

Question

왜 그런지 모르지만 :hover 상태는 .social 이미지에서 작동하지 않습니다. 분리 된 HTML 파일에서 클래스와 클래스를 분리하면 작동합니다. 그래서 내 코드의 나머지 부분에 뭔가가 간섭해야합니다. 사전에

<link href='http://fonts.googleapis.com/css?family=Lato:400' rel='stylesheet' type='text/css'></link> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<style> 
.social{ 
border-radius:100%;box-shadow:0px 1px 0px white;height:30px;opacity:0.4; 
} 
.social:hover{ 
opacity:1; 
} 
</style> 
<style> 
.button{ 
font-size:17px;color:#c3c3c3;text-shadow:0px 1px 1px white;padding:13px;padding-left:20px;padding-right:20px;border:1px solid #c3c3c3;border-radius:4px;box-shadow:0px 2px 7px -3px #c3c3c3;background: #eaeaea; background: -moz-linear-gradient(top, #eaeaea 0%, #dddddd 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#dddddd)); background: -webkit-linear-gradient(top, #eaeaea 0%,#dddddd 100%); background: -o-linear-gradient(top, #eaeaea 0%,#dddddd 100%); background: -ms-linear-gradient(top, #eaeaea 0%,#dddddd 100%); background: linear-gradient(to bottom, #eaeaea 0%,#dddddd 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#dddddd',GradientType=0); 
} 
.button:hover{ 
box-shadow:0px 1px 1px white; 
} 
</style> 
<div style="position:absolute;top:0px;left:0px;height:100%;width:100%;background: #f2f2f2; /* Old browsers */ 
background: -moz-radial-gradient(center, ellipse cover, #f2f2f2 0%, #cecece 100%); /* FF3.6+ */ 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f2f2f2), color-stop(100%,#cecece)); /* Chrome,Safari4+ */ 
background: -webkit-radial-gradient(center, ellipse cover, #f2f2f2 0%,#cecece 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-radial-gradient(center, ellipse cover, #f2f2f2 0%,#cecece 100%); /* Opera 12+ */ 
background: -ms-radial-gradient(center, ellipse cover, #f2f2f2 0%,#cecece 100%); /* IE10+ */ 
background: radial-gradient(ellipse at center, #f2f2f2 0%,#cecece 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#cecece',GradientType=1); /* IE6-9 fallback on horizontal gradient */"> 

<div style="position:absolute;right:25px;top:25px;"> 
<img src="http://cdn1.iconfinder.com/data/icons/social/128/picons33.png" class="social">&nbsp;&nbsp;<img src="http://cdn1.iconfinder.com/data/icons/social/128/picons48.png" class="social"> 
</div> 




<div style="position:absolute;top:0px;left:0px;width:100%;height:100%;"> 
<center> 
<div style="width:900px;position:relative;height:100%;border:0px solid black;text-align:left;"> 
<img src="http://i46.tinypic.com/169i979.jpg" style="height:750px;position:absolute;bottom:0px;left:-350px;"> 


<div style="position:absolute;top:115px;right:0px;font-family:Lato;width:415px;"> 
<div style="font-size:75px;color:#f5f5f5;text-shadow:0px 2px 3px #c3c3c3;">dumbsearch.</div><span style="text-shadow:0px 1px 1px white;font-size:23px;color:#c3c3c3;">It's search like you've never seen or used.</span><br><span style="text-shadow:0px 1px 1px white;font-size:23px;color:#c3c3c3;">Scroll down to learn more.</span> 

<br><br><br> 

<span class="button">Apply to be a beta tester</span></div> 
</div> 


</div> 
</center> 
</div> 
</div> 

덕분에 많은 :

은 여기 내 HTML과 CSS입니다! :)

Answer 1

position:absolute 인 상위 두 .social 이미지 요소 div가 그 형제 div가 중첩되어 표시된다. 긍정적 인 z-index CSS 스타일을 적용하면 문제가 해결됩니다.