зависание работает или не зависит от укладки?

Question

JSFiddle: http://jsfiddle.net/qguq4/19/

Рабочий HTML:

<div id="menu">hover me</div> 
<div id="firstLayer"></div> 

Нерабочий HTML:

<div id="firstLayer"></div> 
<div id="menu">hover me</div> 

CSS:

#firstLayer { 
    background-image:linear-gradient(90deg,red,red); 
    background-size: 100% 100%, 100% 100%; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100px; 
    min-width:900px; 
    position:absolute; 
    left:0; 
    top:0; 
} 

#menu { 
position:absolute; 
top: 110px; 
left: 50%; 
} 

#menu:hover ~ #firstLayer { 
clip: rect(10px,800px,80px,400px); 
} 

Почему эффект парения работать только если #firstLayer приехать с после #menu?

Answer 1

Это общий комбинатор для братьев и сестер. Второму элементу должен предшествовать первый.

http://www.w3.org/TR/selectors/#general-sibling-combinators