为什么css转换不起作用？

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

这是HTML：为什么css转换不起作用？

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

来源

2016-03-06 user2522053

你想要动画什么属性？ 'display'没有意义，这是你在这两个类上唯一的显示 – Jeff

显示：第三个选择器中的任何一个都不会显示红色背景，直到有人悬停在它上面，并且我只是试图在悬停发生时进行转换 – user2522053

如果光标正在工作，我认为整个CSS代码正在工作，但只是“位置：绝对”使掩码不可见。你可以使用检查元素来检查它。 – jilykate

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

.area { 
 
    width: 300px; 
 
    display: block; 
 
} 
 

 
.area:hover .mask{ 
 
    cursor: pointer; 
 
\t 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>

来源

2016-03-06 05:06:27 symlink

非常感谢您 – user2522053

没问题@ user2522053 – symlink

为什么css转换不起作用？

回答

相关问题