伪元素破坏CSS后的负z索引:悬停过渡动画

Question

我正试图用鼠标悬停制作一个动画侧边栏，当鼠标悬停在侧边栏列表项上时，一个彩色框从侧面滑入。为此，我使用了：after伪元素作为滑动框，但它覆盖了列表项的文本。为了解决这个问题，我将：after伪元素的z索引值设置为-1。我一做出改变，过渡就中断了，它们就可以轻松地进入，但鼠标一离开该区域，彩色框就会立即跳回来，而不会出现退出过渡。唯一有效的方法是将鼠标放在其父对象内部。

这是html

<nav id="sidebar">
<div class="list-group-flush" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action sidebar-item active" href="/home">
<div class="sidebar-item-content">
<i class="fas fa-home sidebar-item-icon"></i>
<span class="sidebar-item-text">Home</span>
</div>
</a>
<a class="list-group-item list-group-item-action sidebar-item" href="/trending">
<div class="sidebar-item-content">
<i class="fas fa-trophy sidebar-item-icon"></i>
<span class="sidebar-item-text">Trending</span>
</div>
</a>
<a class="list-group-item list-group-item-action sidebar-item" href="/create_challenge">
<div class="sidebar-item-content">
<i class="fas fa-plus-circle sidebar-item-icon"></i>
<span class="sidebar-item-text">Create Challenge</span>
</div>
</a>
<a class="list-group-item list-group-item-action sidebar-item" href="/profile">
<div class="sidebar-item-content">
<i class="fas fa-user-circle sidebar-item-icon"></i>
<span class="sidebar-item-text">Profile</span>
</div>
</a>
</div>
</nav>

这是SCSS

#sidebar {
height: 100vh;
width: $left-bar-width;
padding-top: spacer(3);
position: fixed;
box-shadow: 0 0 $shadow-spread 0 $shadow-color;
z-index: 1;
clip-path: polygon(0% 0%, add($left-bar-width,$shadow-spread) 0%, add($left-bar-width,$shadow-spread) 
100%, 0% 100%);
}
.sidebar-item-content{
padding: $sidebar-item-content-padding;
&:before{
content: '';
position: absolute;
bottom: $sidebar-item-padding-y;
right: $sidebar-item-padding-x;
transition: width 0.4s ease-out;
width: 0%;
height: subtract(100%,2*$sidebar-item-padding-y);
border-radius: $sidebar-item-content-roundness;
background-color: $sidebar-item-content-color;
z-index: -1;
}
&:hover{
&:before{
width: subtract(100%,2*$sidebar-item-padding-x);
}
}
}
.sidebar-item{
padding: 
$sidebar-item-padding-y 
$sidebar-item-padding-x 
$sidebar-item-padding-y 
$sidebar-item-padding-x;
&.list-group-item{
border: none;
}
&.list-group-item:hover,:focus{
background-color: initial;
color: initial;
}
&.active{
&.list-group-item{
z-index: initial;
background-color: initial;
color: initial;
}
.sidebar-item-content{
&:before{
width: $sidebar-item-active-width;
}
.sidebar-item-icon{
fill: $sidebar-item-content-color;
}
.sidebar-item-text{
color: $sidebar-item-content-color;
font-weight: bold;
}
}
}
}

事先感谢你的帮助，我承认我在这件事上完全被难住了。

Answer 1

固定，父元素的z索引必须为2，基本上，父元素z索引-1必须大于0，而以前不是这样。