使用纯CSS如何显示div后面的内容？

Question

我有一个动画div（1），它覆盖在另一个div（2）的上面。Div2 的背景和文本颜色与 body 相同，因此它对肉眼来说是“透明”的-它只会与背景混合。我希望当 div1 经过 div2 时，div2 的内容被显示出来（即文本）。

我曾考虑过先将两个 div 的 z-index 设置为相同的平面，然后使 div1 完全透明，以便它可以显示其后面的内容，但似乎并没有起作用。

你可以在这里看到我所说的内容。

http://dabblet.com/gist/6034480

如果您无法分辨，蓝色的文字就在那里。我希望橡皮擦div能够显示父div。

- Tommy DC

Answer 1

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

例如

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

注意“+”表示之前，因此橡皮擦类应该先放在第一位，然后才是.classtext。

- Hushme

Answer 2

你面临的问题与堆叠上下文有关，只需将.eraser div移动到不是.parent的子元素中，并调整z-index和position，或者使用负z-index即可。

工作示例

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

- apaul

---

哇，这正是我在寻找的！那么父级 div 只有透明背景吗？此外，在我的实际网站中，我希望文本成为一个链接。是否有一种方法可以使链接仅在被橡皮擦 div 显示时才处于活动/可点击状态？ - Tommy DC

父级div根本没有背景，橡皮擦div掉在父级div和body之间。至于链接问题，您可能需要进行一些研究或提出新问题，但您可以在整个区域上放置一个覆盖div，并在橡皮擦滑入时将其滑出。 - apaul