在:伪元素后的负z-index破坏了CSS:hover过渡动画。

Question

我想做一个悬浮的动画侧栏，当鼠标移到侧栏列表项上时，一个彩色的盒子从侧面滑入。为此，我使用了:after伪元素作为滑动框，但是它覆盖了列表项的文本。为了解决这个问题，我将:after伪元素的z-index值设置为-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-index必须为2，基本上，父元素的z-index-1必须大于0，这在以前是没有的。