私は、親要素にマウスを移動するたびに、隠し Div がフェードインするように CSS を使用しようとしています。
これまでのところ、非表示の div を表示することしかできませんでしたが、トランジションが緩和されることはありません。
JSfiddleの私のコードはこちらhttp://jsfiddle.net/9dsGP/
これが私のコードです:
HTML:
<div id="header">
<div id="button">This is a Button
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
CS: ...
#header #button {width:200px; background:#eee}
#header #button:hover > .content {display:block; opacity:1;}
#header #button .content:hover { display:block;}
#header #button .content {
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
opacity:0;
clear: both;
display: none;
top: -1px;
left:-160px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
何が間違っているのか、何か手がかりはありますか? ボタンの上にマウスを置いたときに、非表示のコンテンツにスムーズな効果を与えようとしているだけです。 よろしくお願いします!
ベストアンサー1
display:none;
ブロックをページから削除し、最初から存在しなかったかのようにします。ブロックは部分的に表示することはできません。ブロックは存在するか、存在しないかのどちらかです。 についても同じことが言えます。定義上、visibility
ブロックが半分になることを期待することはできません。幸い、代わりに をフェード効果に使用できます。 -hidden
visible
opacity
参照
代替の CSS ソリューションとして、、および プロパティを使用しopacity
てheight
望ましいpadding
効果を実現できます。
#header #button:hover > .content {
opacity:1;
height: 150px;
padding: 8px;
}
#header #button .content {
opacity:0;
height: 0;
padding: 0 8px;
overflow: hidden;
transition: all .3s ease .15s;
}
(簡潔にするためベンダー プレフィックスは省略します。)
がここにあります動作デモ. またここには同様のトピックSO で。
#header #button {
width:200px;
background:#ddd;
transition: border-radius .3s ease .15s;
}
#header #button:hover, #header #button > .content {
border-radius: 0px 0px 7px 7px;
}
#header #button:hover > .content {
opacity: 1;
height: 150px;
padding: 8px;
}
#header #button > .content {
opacity:0;
clear: both;
height: 0;
padding: 0 8px;
overflow: hidden;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
border: 1px solid #ddd;
-webkit-box-shadow: 0px 2px 2px #ddd;
-moz-box-shadow: 0px 2px 2px #ddd;
box-shadow: 0px 2px 2px #ddd;
background: #FFF;
}
#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
<div id="button"> <span>This is a Button</span>
<div class="content">
This is the Hidden Div
</div>
</div>
</div>