话不多说,直接上图
<style>
.singup{
border: 1px solid #ccc;
float: right;
width: 310px;
min-height: 440px;
margin-top: 22px;
padding: 0 32px 14px 36px;
position: relative ;
}
.singup_img1{
width: 55px;height: 55px;
background: url("../img/login/login_change.png");
position: absolute;
right: 10px;top: 10px;
}
/*这里设置了hver伪类,但是失效了*/
.singup_img1:hover+.singup img:nth-child(2){display: block;}
.singup img:nth-child(2){
display: none;
position: absolute;
top: 20px;
right: 80px;
}
.singup_img2{
display: none;
width: 55px;height: 55px;
background: url("../img/login/login_change.png") no-repeat;
background-position: 0% 25%;
position: absolute;
right: 10px;top: 10px;
}
.singup img:nth-child(4){
display: none;
position: absolute;
top: 20px;
right: 80px;
}
</style>
......
<div class="singup">
<div class="singup_img1"></div>
<img src="../img/login/saomadenglu.jpg">
<div class="singup_img2"></div>
<img src="../img/login/短信mimadegnlu.jpg">
</div>