hover失效
原因是hover只作用于子元素
<div class="first" >
<a class="pic1 fl" href=""></a>
<button class="lb"><</button>
<button class="rb">></button>
<div class="circle">
<span class="awake"></span><span></span><span></span><span></span><span></span>
</div>
<a class="pic2 fr" href=""></a>
</div>
hover 失效
#display .center .first .pic1 button{
width: 20px;
height: 30px;
line-height: 30px;
color: #fff;
cursor: pointer;
border: none;
background-color: rgba(0,0,0,0.3);
position: absolute;
top: 50%;
margin-top: -15px;
display: none;
}
#display .center .first .pic1:hover button{
display: block;
}
<div class="first" >
<a class="pic1 fl" href="">
<button class="lb"><</button>
<button class="rb">></button>
<div class="circle">
<span class="awake"></span><span></span><span></span><span></span><span></span>
</div>
</a>
<a class="pic2 fr" href=""></a>
</div>
hover有效