CSS переход на псевдоэлементе не работает для простого изменения цвета фона - PullRequest
Новая
       40

CSS переход на псевдоэлементе не работает для простого изменения цвета фона

0 голосов
/ 22 октября 2019

Я пытаюсь применить эффект перехода к элементу div при наведении указателя мыши на: hover: before в CSS, чтобы он мог создать темное наложение, но, к сожалению, переход не происходит. Он просто окрашивается и исчезает без эффекта затухания, как будто никакой переход не применяется.

Вот скрипка .

Я применил переход к каждому элементу. Я также попробовал :: before вместо: before и, конечно, добавил поддержку всех браузеров (я использую chrome). Пробный переход только на background-color тоже не будет работать. Пожалуйста, скажите мне, что я делаю не так. Заранее спасибо.

HTML: 

<div class="container">
    <!-- ... -->
</div>

CSS: 

.container{
    border: solid 1px #000;
    padding: 50px;
    position: relative;
}

.container:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    transition: all 3s ease;
}

.container:hover:before{
    display: block;
    background-color: rgba(0, 0, 0, 0.2);
}
...