伪元素上的 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: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);
}