Как использовать амперсанд в эффекте наведения с родительским элементом для псевдоэлементов?

Question

Как амперсанд можно использовать в эффекте наведения на родительский элемент с псевдоэлементом ::after или ::before или как его можно встроить, чтобы он работал?

.showcase::after {
    content: '';
    height: 100vh;
    width: 100%;        
    background-image: url('https://image.ibb.co/gzOBup/showcase.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;        
    display: block;
    filter: blur(10px);
    -webkit-filter: blur(10px);
    transition: $transAll;

    :hover {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    }
}

Answer 1

Попробуйте это:

.showcase{
    &::after {
        content: '';
        height: 100vh;
        width: 100%;        
        background-image: url('https://image.ibb.co/gzOBup/showcase.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;        
        display: block;
        filter: blur(10px);
        -webkit-filter: blur(10px);
        transition: $transAll;   
    }

    &:hover {
        &::after {
            filter: blur(0px);
            -webkit-filter: blur(0px);       
        }
    }
}

Answer 2

Вы не можете напрямую использовать селектор hover для псевдоэлемента.В вашем случае вы можете использовать директиву @at-root, чтобы она заработала.

Демонстрация:

.showcase::after {
    content: '';
    height: 100vh;
    width: 100%;        
    background-image: url('https://image.ibb.co/gzOBup/showcase.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;        
    display: block;
    filter: blur(10px);
    -webkit-filter: blur(10px);
    transition: $transAll;

    @at-root .showcase:hover::after {
        filter: blur(0px);
        -webkit-filter: blur(0px);
    }
}