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

我试图在CSS中使用：hover:before在div上应用一个过渡效果，这样可以创建一个暗覆盖，但不幸的是没有发生过渡。它只是在没有淡入淡出效果的情况下进行着色，就好像没有应用过渡一样

这是一个例子

我将转换应用于每个元素。我还尝试了：：before而不是：before，当然，我在使用chrome时添加了所有浏览器支持。仅在背景色上尝试过渡也不起作用。请告诉我我做错了什么。提前谢谢

HTML:

CSS:

.集装箱{ 边框：实心1px 000； 填充：50px； 位置：相对位置； } .货柜：在{ 内容：； 位置：绝对位置； 宽度：100%； 身高：100%； 排名：0； 左：0； 显示：无； 过渡：所有3s轻松； } .容器：悬停：之前{ 显示：块； 背景色：rgba0,0,0,0.2； }

---

问题是显示是不可传递的。如果从“显示：无”移动到“显示：块”，则不能使用任何转换

把指针事件放回悬停状态是什么意思？这将创建一个闪烁效果，就像在：上一样，只是为了确保它不会覆盖任何其他内容。

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