悬停是否有效取决于堆叠？

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