CSS 伪元素上的过渡不适用于简单的背景颜色更改

Question

我正在尝试在 CSS 中使用 :hover:before 将鼠标悬停在 div 上时应用过渡效果，这样它可以创建一个深色叠加层，但不幸的是没有发生过渡。它只是进出颜色而没有褪色效果，就好像没有应用过渡一样。

这里是 fiddle。

我对每个元素应用了过渡。我还尝试了 ::before 而不是 :before 并且当然添加了所有浏览器支持（我正在使用 chrome）。仅在背景颜色上尝试过的过渡也不起作用。请告诉我我做错了什么。提前致谢。

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

Answer 1

问题是 "display" 不可转换。如果您要从 display:none 移动到 display:block;

，则不能使用任何转换

.container:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    pointer-events:none; /* So it won't be clickable */
    transition: all 3s ease;
}

.container:hover:before{
    pointer-events: all;
    background-color: rgba(0, 0, 0, 0.2);
}

CSS 伪元素上的过渡不适用于简单的背景颜色更改

CSS transition on a pseudo-element doesn't work for a simple background-color change

css

pseudo-element

css-transitions