Html CSS：子元素带有过渡的动画悬停

简单的问题我猜，但似乎找不到解决办法

非常简单的HTML结构：

.interview

有一个子

.overlay

，即

display:none

。当鼠标悬停在

.interview

上时，我想淡入孩子的视野。然而，这不起作用

.interview {
        background:red;
        position:relative;
        height:710px;

        /*Transition*/
        transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -moz-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -o-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -ms-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.interview .overlay {
        position:absolute;
        background:rgba(0, 0, 0, 0.6);
        height:100%;
        width:100%;
        top:0;
        left:0;
        display:none;
}


.interview:hover {
     .overlay { display:block };
}

为了在这里工作，我必须在哪里进行过渡

显示：无从页面中删除块，就好像它从未出现过一样

使用

不透明度

而不是“显示属性”不与转换一起使用

。采访{
背景：红色；
位置：相对位置；
高度：710px；
/*过渡*/
过渡：全.5s立方贝塞尔（0.19,1,0.22,1）0s；
-webkit过渡：所有.5s立方贝塞尔（0.19,1,0.22,1）0s；
-moz变换：全.5s立方贝塞尔（0.19,1,0.22,1）0s；
-o型过渡：全0.5s三次贝塞尔（0.19,1,0.22,1）0s；
-ms过渡：全.5s立方贝塞尔（0.19,1,0.22,1）0s；
}
.采访.叠加{
位置：绝对位置；
背景：rgba（0,0,0,0.6）；
身高：100%；
宽度：100%；
排名：0；
左：0；
不透明度：0；
过渡：1s线性；
}
.采访：悬停.覆盖{
不透明度：1；
}