这是我的代码:
.test,
.test-link {
position: relative;
}
.test-link > a,
.test-link img {
display: block;
width: 100%;
}
.overlay,
.overlay:before {
opacity: 0;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
}
.overlay:before {
content: '';
z-index: auto;
background-color: #FFF;
opacity: 0.75;
}
.test:hover .overlay {
opacity: 1;
}

<div class="test">
<div class="test-link">
<a href="#">test</a>
<div class="overlay">
<div class="sub-title">
<span>
test test test ets
</span>
</div>
</div>
</div>
</div>
&#13;
我创建了一个链接,当它悬停时,会显示文本并淡化为较低的不透明度。我的问题是,我想要淡化的元素中包含的文本也会消失,我希望将其保持100%不透明度。怎么实现呢?有什么建议吗?
答案 0 :(得分:1)
创建一个伪元素,不透明伪元素而不是父元素。
.parent:before {
content: '';
background-color: red;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
display: none;
}
.parent {
position: relative;
z-index: 1;
}
.parent:hover:before {
display: block;
}
.text span {
display: none;
margin-left: 10px;
}
.parent:hover .text span {
display: inline;
}
&#13;
<div class="parent">
<div class="text">
<p>This is a text <span>Hover text</span></p>
</div>
</div>
&#13;