Question

我有一个动画div（1），它位于另一个div（2）之上。 Div2的背景和文字颜色与身体相同，因此它肉眼看不见 - 它只是与背景融为一体。我想这样当div1越过div2时，div2的内容被揭示（文本）。

我首先考虑通过在同一平面上设置两个div的z-index来做到这一点，然后使div1完全透明，以便揭示它背后的内容，但它似乎不起作用。

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

http://dabblet.com/gist/6034480

如果你不知道的话，文字是蓝色的。我希望橡皮擦div显示父div。

Answer 1

你可以在css

中使用css伪选择器，如'+'

喜欢

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

注意'+'和以前一样，所以首先应该先放置橡皮擦类.classtext将是第二个

Answer 2

您遇到的问题与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;
}

如何用纯CSS展示div背后的内容？

2 个答案: