悬停效果和下划线随着背景颜色的变化而消失答案

【问题标题】：Hover effect and underline disappear with changing the background color悬停效果和下划线随着背景颜色的变化而消失
【发布时间】：2020-11-01 22:06:42
【问题描述】：

我在 Angular 项目中有一个主面板。我想改变它的背景颜色，但是我的下划线和悬停效果消失了。

更改背景颜色之前：

将背景颜色改为白色后：

我有一个如下所示的管理布局：

<div class="main-panel">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
</div>

使用 css：

.main-panel {
  background-color: rgb(255, 255, 255);
}

还有下面的home.component，其中的文字是：

 <div><span class="highlight">Cloud Native</span>: Cloud Training, Cloud Development, Cloud Architecture, Cloud Assesment....</div>

这是我的下划线和悬停元素的CSS：

.highlight {
  position: relative;
}

.highlight::after {
  content: " ";
  left: 0;
  right: 0;
  position: absolute;
  bottom: 1px;
  height: 25%;
  background-color: #9bffb0a6;
  z-index: -1;
  border-radius: 2px;
}

.highlight:hover::after {
  background-color: #80ff9b;
}

【问题讨论】：

在这里，我尝试了您在 stackblitz.com 上分享的内容。但是当我将文本悬停时，我得到了下划线。参考：stackblitz.com/edit/angular-rxjs-playground-uytkcj?file=app/…

标签： html css angular

【解决方案1】：

问题是由否定z-index引起的。删除该属性或将其设置为零。

通过设置这个负数z-index，您将::after 伪元素移到.main-panel 后面，并且由于您明确地将背景颜色设置为.main-panel，因此伪元素始终是不可见的。

【讨论】：