Check out this JSFiddle link to see the code in action: http://jsfiddle.net/qguq4/19/
Here is the HTML that works:
<div id="menu">hover me</div>
<div id="firstLayer"></div>
And here is the non-working HTML:
<div id="firstLayer"></div>
<div id="menu">hover me</div>
This is the CSS being used:
#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);
}
The question is, why does the hover effect only work if #firstLayer comes after #menu in the HTML?