0

我有一个 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;
}

谢谢！

4

3 回答 3

1 
.inner_box:hover {
    opacity: 0.0;
}
于 2013-02-07T08:17:20.933 回答
1

将此添加到您的 CSS 中：

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

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

更多关于 opacity 属性行为的有用信息可以在这里找到： http: //www.w3schools.com/cssref/css3_pr_opacity.asp

于 2013-02-07T08:19:46.520 回答
1

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

.inner_box:hover .text {
  visibility:hidden;
}
于 2013-02-07T08:19:51.503 回答