html - 过渡和子节点 css

Question

我不明白为什么子 div 显示没有淡入淡出效果？我需要当我将鼠标悬停在div（“黑色”）上时，div（红色）逐渐出现..怎么做？

小提琴

HTML

<div class="main">
    <div class="ok"></div>  
</div>

CSS

.main {
    width: 200px;
    height: 200px;
    background: black;
}
.ok {
    width: 50px;
    height: 50px;
    background: red;
    display: none;
    -webkit-transition: opacity 1s linear;  
    opacity: 0;
}
.main:hover .ok{ 
    opacity: 1;
    display: block;
}

谢谢

Answer 1

display更改属性时不能应用过渡：

显示器上的转换：属性

只需卸下显示部分，它就可以工作：

.ok {
    width: 50px;
    height: 50px;
    background: red;    
    transition: opacity 1s linear;  
    opacity: 0;
}
.main:hover .ok{ 
    opacity: 1;
}

小提琴：http: //jsfiddle.net/sGxgv/1/