我构建了此代码段,以使用伪元素突出显示悬停的段落:
.wrapper {
/* background: #ccc; */
}
p {
position: relative;
padding: 0.5em 1em;
margin: 0em;
}
p:hover::after {
height: 100%;
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
background: orange;
content: '';
z-index: -1;
border-radius: 7px;
}
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem et ea rebum.</p>
<p>takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
只要包装div没有应用背景色,上面的代码就可以正常工作。但是,只要包装器获得了背景色,突出显示的伪元素就会被隐藏。调整z-index没有帮助。
.wrapper {
background: #ccc;
}
p {
position: relative;
padding: 0.5em 1em;
margin: 0em;
}
p:hover::after {
height: 100%;
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
background: orange;
content: '';
z-index: -1;
border-radius: 7px;
}
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem et ea rebum.</p>
<p>takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
答案 0 :(得分:4)
您需要向一个类中添加另一个z-index,请参见以下内容以获取有效的解决方案。请注意,我是如何将z-index:50;
添加到实际的p
标记中的。
.wrapper {
background: #ccc;
}
p {
position: relative;
padding: 0.5em 1em;
margin: 0em;
z-index:50;
}
p:hover::after {
height: 100%;
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
background: orange;
content: '';
z-index: -1;
border-radius: 7px;
}
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem et ea rebum.</p>
<p>takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>