一般兄弟选择器不适用于悬停

Question

我试图让一个div在盘旋另一个时消失。我试图将第二个div的宽度修改为0以使其消失。但是，效果并不适用。我正在使用一般兄弟选择器（〜）

<div id="bands">
<div id="left_band">
</div>
<div id="right_band">
</div>

#bands{
width: 960px;
height: 1000px;
background-color:  #002A66;
padding-top: 20px;

}

#left_band {
        -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
width: 100px;
height: 100px;
float: left;
background-color: red;

}

#left_band:hover{
width: 900px;
height: 500px;

}

#right_band{
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
width: 100px;
height: 100px;
float: right;
background-color: red;

}

#right_band:hover ~ #left_band{
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
display: none;

}

Answer 1

根据这个：

http://reference.sitepoint.com/css/generalsiblingselector

您需要在声明中交换订单：

#left_band~#right_band:hover{
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
display: none;
}

因为左手乐队在你的dom中排名第一