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

从display:none移除.mask并将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>

为什么css转换不起作用？

1 个答案: