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
之后才有效?
最佳答案
这是一个通用的兄弟组合器。第二个元素必须在第一个元素之前。
关于html - 悬停是否有效取决于堆叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17795005/