css - css opacity 和 z-index 的问题

Question

在一个 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/

Answer 1

将鼠标悬停在 .frame 元素上时，将 .bottom 元素的不透明度更改为 0。

添加此 CSS:

.frame:hover .bottom {
    opacity:0;
}

Fiddle