懸停效果和下划線隨着背景顏色的變化而消失

Question

我在一個角度項目中有一個主面板。 我想更改它的背景顏色，但是我的下划線和懸停效果消失了。

在更改背景顏色之前：

將背景顏色更改為白色后：

我有一個看起來像這樣的管理布局：

<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;
}

Answer 1

問題是由負z-index引起的。 刪除該屬性或將其設置為零。

通過設置此負z-index ，您將::after偽元素移動到.main-panel后面，並且由於您明確設置了.main-panel背景顏色，因此偽元素始終不可見。