如何用纯 CSS 显示 div 背后的内容？答案

【问题标题】：How to reveal content behind a div with pure css?如何用纯 CSS 显示 div 背后的内容？
【发布时间】：2013-07-19 01:56:46
【问题描述】：

我有一个动画 div (1)，它位于另一个 div (2) 的顶部。 Div2 的背景和文本颜色与正文相同，因此肉眼“看不见”——它只是与背景融为一体。我希望当 div1 越过 div2 时，显示 div2 的内容（文本）。

我曾想过这样做，首先将两个 div 的 z-index 设置在同一平面上，然后使 div1 完全透明，以便显示其背后的内容，但它似乎不起作用。

在这里你可以看到我在说什么。

http://dabblet.com/gist/6034480

如果你看不出来，文本是蓝色的。我希望橡皮擦 div 显示父 div。

【问题讨论】：

标签： css html z-index transparency

【解决方案1】：

您面临的问题与stacking context 有关，只需移动.eraser div 使其不是.parent 的子元素并使用z-index 和位置，或者您可以使用负 z-index。

Working Example

Working Example with negative z-index

HTML

<div class="parent">
    <p>HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo WorldHEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World HEllo World</p>
</div>
<div class="eraser"></div>

CSS

body {
    background-color: blue;
}
.parent {
    width: 500px;
    height: 400px;
    margin: 125px auto;
    padding: 15px;
    overflow: visible;
    position: relative;
    color: blue;
    z-index:3;
}
.eraser {
    left:180px;
    top: 60px;
    height: 100px;
    width: 0px;
    border-radius: 30px;
    transform-origin: left;
    background-color: #FFFFFF;
    transition: width .3s linear;
    transform: rotate(110deg);
    /*box-shadow: 0 0 100px 50px rgba(255, 255, 255, .8);*/
    display: inline-block;
    position: absolute;
    z-index: 2;
}
body:hover .eraser {
    width: 210px;
    transition: width .2s;
}

【讨论】：

哇，这正是我想要的！那么父 div 是否只有透明背景？此外，在我的实际站点中，我希望文本改为链接。有没有办法让链接只有在橡皮擦 div 显示时才激活/可点击？
父 div 根本没有背景，橡皮擦 div 落在父 div 和 body 之间。至于链接问题，您可能需要做一些研究或提出一个新问题，但您可以在整个内容上放置一个封面 div，然后在橡皮擦滑入时将其滑出。

【解决方案2】：

你可以在css中使用像'+'这样的css伪选择器

喜欢

.classtext:hover + .eraser {left:50px;}

注意'+'和以前一样，所以橡皮擦类应该放在第一位，然后.classtext将是第二位

【讨论】：