转换和子节点css

Question

我无法理解为什么孩子div显示没有fadein效应？当我将鼠标悬停在div（“黑色”）上时，我需要逐渐出现div（红色）..怎么做？

Fiddle

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属性时无法应用转换：

Transitions on the display: property

只需移除显示部件，即可使用：

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

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