フェードインとフェードアウトを実現する純粋な CSS_html/css_WEB-ITnose

その時の目的は、純粋な CSS を使用して、マウスがノード A 上にあるときに B がフェードインし、A から移動するとフェードアウトする機能を実装することでした。B はスペースを占有せず、イベントがないことが望ましいです表示されない場合 (通常は表示: なしの実装)、問題が発生します。

以下は dom 構造です

移行は変更をサポートしていませんを display 属性に追加すると、ブラウザーはディスプレイとともにノード属性の変更を表示することになり、アニメーション効果が失敗します

#container{width:100px;
height:100px;
background-color: red;
display:ブロック;

}
#container + #detail{
幅:10px;
高さ:10px;
位置:絶対;
背景色:#666;
上:15px;
左:15px;
不透明度:0;
transition:all 0.4 s;
display: none;
}
#container:hover + #detail,#detail:hover{
opacity:1;
display: block;
}

フェードインは完了していますが、フェードアウトは機能しません。これは詳細ノードが原因です。スペースがありません

#container{width:100px;
height:100px;
background-color: red;
display:block;

}
#container + #detail{
幅:10px;
高さ:10px;
位置:絶対;
背景色:#666;
上:15px;
不透明度:0; sease-out;
display:none;
}
#container:hover + #detail,#detail:hover{
opacity:1;
display:block;
-webkit-animation:show 0.4s easy-in;トランジション遅延: 0s;
}
@-webkit-keyframes show /* Safari と Chrome */
{
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes Hide /* Safari と Chrome */
{
0% { opacity:1;}
100% {opacity:0;}
}

最終実装コード (chrome でのみ記述)

#container{width:100px;

高さ:100px;

背景色:赤;

表示:ブロック;

}
#detail{
幅:10px;
高さ:0px;
位置:絶対;
背景色:#666;
トップ: 15ピクセル;
左:15ピクセル;
不透明度:0;
-webkit-animation:非表示0.4秒イーズアウト;
表示:ブロック;
移行:高さ1ミリ秒;
移行遅延:0.4秒;
オーバーフロー:非表示;
}
#container:hover + #detail{
高さ:10px;
不透明度:1;
表示:ブロック;
-webkit-animation:show 0.4秒イーズイン;
移行遅延: 0秒;
}
#detail :hover{
高さ:10px;
不透明度:1 ;
表示:ブロック;
-webkit-animation:show 0.4sイーズイン;
遷移遅延: 0s;
}
@-webkit-keyframes show
{
0% {opacity:0;}
100% { opacity:1;}
}
@-webkit-keyframes
{
0% {opacity:1;}
100% {opacity:0;}
}