3

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

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

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

http://dabblet.com/gist/6034480

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

4

2 回答 2

0

您面临的问题与堆叠上下文有关，只需移动.eraserdiv 使其不是.parentz-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;
}
于 2013-07-19T02:17:15.290 回答
0

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

喜欢

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

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

于 2013-07-19T02:03:33.007 回答