如何使用伪元素在悬停时突出显示段落

Question

我构建此代码段是为了使用伪元素在悬停时突出显示段落：

.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>

Answer 1

您需要将另一个 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>

JSFiddle

如何使用伪元素在悬停时突出显示段落

How to highlight paragraphs on hover using pseudo element

css

pseudo-element