css中 兄弟选择器结构:hover失效问题

话不多说,直接上图

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

    .singup_img1:hover+img:nth-child(2){display: block;}
 

a:hover b , 就相当于a hover时监听 a b，这本身就是一个后代选择器。

所以你的 .singup_img1:hover+.singup img 就会是 .singup_img1 hover时 .singup_img1 + .singup_img1 img 这么个选择器，所以错了