子元素悬停时的 CSS 过渡

当子元素的父元素悬停在其上方时，我试图暂停子元素的显示。

Html:

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

Css:

span { 
    position: relative; 
}
span div { 
    display: none;
    width: 0px;
    opacity: 0;

    transition: width 5s;
    -webkit-transition: width 5s;

    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    display: inline-block;
    width: 150px;
    opacity: 1;
}​

截至目前，当跨度悬停时，div 在显示之前没有延迟。我该如何修复它以便有一个暂停？

在这里小提琴：http://jsfiddle.net/SReject/vmvdK/ http://jsfiddle.net/SReject/vmvdK/

一些注意事项：
我最初尝试转换显示，但正如爱德华指出的那样，这是不可能的，并且尝试了上面的方法，但也不起作用

SOLVED

看起来“过渡到”样式中的任何“显示”属性都会阻止任何过渡动画的发生。解决这个问题。我将要显示的子项的宽度设置为 0px 并使其完全透明。然后在“过渡到”样式中，我设置了正确的宽度，并使 div 变为实心：

Html:

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

Css:

span { 
    position: relative; 
}
span div { 
    position: absolute;

    width: 0px;
    opacity: 0;
    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    width: 150px;
    opacity: 1;
}​

在这里小提琴：http://jsfiddle.net/SReject/vmvdK/ http://jsfiddle.net/SReject/vmvdK/

根据本文 http://oli.jp/2010/css-animatable-properties/关于 CSS 过渡，这是由有关 CSS 转换的 MDN 页面 https://developer.mozilla.org/en/CSS/CSS_transitions, the display财产不是可以转移的：

您需要转换多个属性或值，但在撰写本文时尚未指定且不受支持：

• background-image，包括梯度
• ...
• display在没有和其他任何东西之间

因此应用transition: display 5s;财产给你的div没有影响。

EDIT:

根据您更新的代码，只要您不指定不透明度和宽度，就可以实现您想要的效果display财产。只需删除该线

display: none;

来自span div部分，当您将鼠标悬停在弹出菜单上时，弹出菜单将使用您指定的过渡。

自从过渡以来display:none; to display:inline-block无法进行动画处理，此属性可能仅在过渡结束时更改 - 因此，不透明度会在div仍然看不见。