为什么 css 转换不起作用

Question

所以我试图为图像块放置悬停，但过渡不起作用，我不知道为什么会发生这种情况。

这是 HTML：

 <div class="area">
      <div class="mask"></div>
      <img src="http://placehold.it/300x300">
  </div>

这是CSS：（光标运行良好，但过渡根本不起作用）

.area {
    width: 300px;
    display: block;
}
.area:hover .mask{
    display: block;
    cursor: pointer;
    transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
}
.mask{
    position: absolute;
    background-color: rgba(226,23,37,0.9);
    width: 300px;
    height: 300px;
    display: none;
}

Answer 1

从.mask中删除display:none并将background-color: rgba(226,23,37,0.9);移动到.area:hover .mask规则：

.area {
    width: 300px;
    display: block;
}
.area:hover .mask{
    cursor: pointer;
	background-color: rgba(226,23,37,0.9);
    transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
}
.mask{
    position: absolute;
    width: 300px;
    height: 300px;
}

<div class="area">
    <div class="mask"></div>
    <img src="http://placehold.it/300x300">
</div>