在一个 div .frame 中,我有两个 div:.main 和 .bottom。 它们的位置相同,但 .main 具有更高的 z-index 值。 当鼠标在 .frame 上时,.main 的不透明度变为 0.5,因此当鼠标在 .main 上时,我们可以看到 .bottom。 Without visibility: hidden 当.main 的不透明度为0.5 时,如何隐藏内容.bottom?
我的 CSS 是:
.frame{
position: absolute;
top:20px;
left:20px;
width:100px;
}
.main{
position: absolute;
top:0px;
z-index:2;
max-width: 100%;
background-color: red;
width:100%;
}
.bottom{
position:absolute;
top:0px;
z-index:1;
width:100%;
}
.frame:hover .main{
opacity:0.5;
}
和我的 html:
<div class="frame">
<div class="main">main<br>main<br>main<br>main<br></div>
<div class="bottom">bottom<br>bottom<br>bottom<br></div>
</div>
这里有一个 jsFiddle:http://jsfiddle.net/malamine_kebe/MNTcz/
最佳答案
关于css - css opacity 和 z-index 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20824393/