html - :hover state not working

Question

我不知道为什么，:hover 状态不适用于 .social 图片。当我将它们和它们的类隔离在一个单独的 HTML 文件中时，它们就可以工作了。所以我想一定有什么东西干扰了我的其余代码。

这是我的 HTML 和 CSS:

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

提前致谢! :)

Answer 1

看起来两个 .social 图像元素的父级 div，即 position:absolute，与其兄弟元素重叠分区。通过对其应用正 z-index CSS 样式，问题将得到解决。