Общий селектор селектора, не применяющийся при наведении указателя мыши

Question

Im пытается сделать div исчезнуть при наведении другого. Я пытаюсь изменить ширину второго div на 0, чтобы он исчез. Однако эффект не применяется forit. Im используя общий селектор родственный (~)

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

, так как левая группа занимает первое место в вашем доме