Css子要素のホバーでの遷移

Question

親要素の上にマウスポインタを置いたときに子要素の表示を一時停止しようとしています。

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/

いくつかの注意事項：
私はもともとディスプレイを移行しようとしたが、エドワードが指摘したように、それができない、との意味がその上方に試してみましたが、また、」にISN

作業tはそれはスタイリングが起きてから任意の遷移アニメーションを停止します「への移行」のいずれかの「表示」プロパティように思われる

を解決しました。これを回避する。私は子供の幅を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/

Answer 1

MDN page on CSS transitionsによって参照されるCSSトランジションのthis articleによれば、displayプロパティは通過可能なプロパティではありませんioned：そこに移行したいと思ういくつかのプロパティまたは値がありますが、執筆時点でunspeccedと、サポートされていないの両方である

：グラデーション

含む

• background-image、...
• display

なしと何か他のものの間で10

transition: display 5s;プロパティをdivに適用しても効果はありません。

EDIT：

あなたの更新されたコードに基づいて、あなたは限り、あなたはdisplayプロパティを指定しないよう不透明さと幅とあなたが望む効果を達成することができます。単にspan divセクション、ポップアップメニューからライン

display: none; 

を削除するには、その上にカーソルを移動したときに指定したトランジションを使用します。

display:none;からdisplay:inline-blockへの遷移をアニメーション化することができないので、このプロパティは、おそらく遷移の終了時にのみ変更される - ので、divがまだ見えないながら不透明度アニメーション。

Answer 2

-webkit-transition-delay: ;を試しましたか？そうでない場合、これはあなたが探しているものかもしれません。

は、コード内のいくつかの変更でした

span div { 
position: absolute; 
left: 5px; 
top: 5px; 
border: 1px solid #000; 
background-color: #888; 
width: 0px; 
opacity: 0; 
cursor: pointer; 

}

span:hover div { 
display: inline-block; 
-webkit-transition-delay: 2s; 
width: 150px;    
opacity: 1; 

}

をそしてここで、 ``

This Is The ChildSome Text in the DIV

周り demo