每当我悬停其父元素时,我一直在尝试使用css来显示隐藏的Div淡入淡出.
到目前为止,我所要做的就是让隐藏的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>
Run Code Online (Sandbox Code Playgroud)
CSS:
#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; …Run Code Online (Sandbox Code Playgroud)