CSS不透明度 - 无法覆盖下面div的文本

Question

我有一个div，里面有一些文字和“悬停”，我想显示另一个带有其他文字的div。

问题是第一个div中的文本到达第二个，所有内容似乎都混杂在一起。我希望第二个div完全覆盖第一个div。

以下是jsfiddle

HTML

<div class="outer_box">
        <div class="inner_box">
            Main</div>
            <span class="caption">Caption</span>
</div>

CSS

.outer_box {
    width:100px;
    height:100px;
    background-color:orange;

}

.inner_box{
    width:100px;
    height:100px;
    position:absolute;

}

.caption {
    width:100px;
    height:100px;

    background:black;
    color:rgba(255,255,255,1);
    opacity:0;
}

.outer_box:hover .caption{
    opacity:1;
}

谢谢！

Answer 1

.inner_box:hover {
    opacity: 0.0;
}

Answer 2

将此添加到您的CSS：

.outer_box:hover, .inner_box:hover {
    opacity:0;
}

如果您注意到，我确保包含.outer_box：悬停选择器，以防您的意图是使外盒明显大于内盒。

有关不透明度属性行为的更多有用信息，请访问：http://www.w3schools.com/cssref/css3_pr_opacity.asp

Answer 3

您需要设置第一个div中的文本样式，使其在悬停时消失：

.inner_box:hover .text {
  visibility:hidden;
}