css不透明度和z-index问题答案

【问题标题】：issue with css opacity and z-indexcss不透明度和z-index问题
【发布时间】：2013-12-29 20:01:52
【问题描述】：

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

【问题讨论】：

在您的描述中，您说将鼠标悬停在 .frame 上会将 .main 更改为 0.85 不透明度，但您的代码显示 0.5
我不明白你想达到什么目的。为什么在悬停frame 时隐藏.bottom。您希望bottom 何时可见？
@trojansdestroy 谢谢，我刚刚编辑了它
@user3074592 with jQuery 我正在使用 toggle() 来显示底部
请你告诉我你想要什么？两个div的浮动在哪里，两个div的处理方式。两个div的宽度和高度在哪里！

标签： css z-index opacity

【解决方案1】：

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

添加这个 CSS：

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

Fiddle

【讨论】：

【解决方案2】：

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

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

【讨论】：

这是一个解决方案，但是当鼠标悬停在 .main 上时，我使用 jQuery 使用 toggle() 来显示 .bottom，因此您的解决方案 .bottom 为空。