Отрицательный z-индекс на: после разрыва псевдоэлемента CSS: анимация перехода при наведении - PullRequest
Новая
       62

Отрицательный z-индекс на: после разрыва псевдоэлемента CSS: анимация перехода при наведении

1 голос
/ 27 апреля 2020

Я пытался создать анимированную боковую панель с наведением курсора, когда мышь наводит курсор на элемент списка боковой панели, а со стороны скользит цветная рамка. Для этого я использовал псевдоэлемент: after, чтобы использовать его в качестве скользящего окна, однако оно охватывало текст элемента списка. Чтобы исправить это, я установил значение z-index псевдоэлемента: after в -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>

А вот S CSS

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

Заранее благодарю за помощь, признаюсь, что я совершенно тупик на этом.

1 Ответ

1 голос
/ 29 апреля 2020

Исправлено, родительский элемент должен был иметь z-индекс 2, в основном родительский z-индекс - 1 должен был быть больше 0, чего не было раньше.

...