我有一个动画div(1),它覆盖在另一个div(2)的上面。Div2 的背景和文本颜色与 body 相同,因此它对肉眼来说是“透明”的-它只会与背景混合。我希望当 div1 经过 div2 时,div2 的内容被显示出来(即文本)。
我曾考虑过先将两个 div 的 z-index 设置为相同的平面,然后使 div1 完全透明,以便它可以显示其后面的内容,但似乎并没有起作用。
你可以在这里看到我所说的内容。
如果您无法分辨,蓝色的文字就在那里。我希望橡皮擦div能够显示父div。我有一个动画div(1),它覆盖在另一个div(2)的上面。Div2 的背景和文本颜色与 body 相同,因此它对肉眼来说是“透明”的-它只会与背景混合。我希望当 div1 经过 div2 时,div2 的内容被显示出来(即文本)。
我曾考虑过先将两个 div 的 z-index 设置为相同的平面,然后使 div1 完全透明,以便它可以显示其后面的内容,但似乎并没有起作用。
你可以在这里看到我所说的内容。
如果您无法分辨,蓝色的文字就在那里。我希望橡皮擦div能够显示父div。你可以在CSS中使用像'+'这样的伪选择器
例如
.classtext:hover + .eraser {left:50px;}
注意“+”表示之前,因此橡皮擦类应该先放在第一位,然后才是.classtext。
.eraser
div移动到不是.parent
的子元素中,并调整z-index和position,或者使用负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;
}