Question

在div .frame中我有两个div：.main和.bottom。它们都是相同的位置，但.main具有更高的z-index值。当鼠标在.frame上时，.main的不透明度变为0.5，所以当鼠标结束时.main我们可以看到.bottom。没有可见性：隐藏当.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

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

添加此CSS：

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

Fiddle

Answer 2

将鼠标悬停在.bottom时，将0的不透明度设置为.frame。

Demo

<强> 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;
}

/*..... Add below style in ur css .........*/

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

css opacity和z-index的问题

2 个答案: