每当我将其悬停在其父元素上时,我一直试图使用css来显示Hidden Div淡入。
到目前为止,我所能做的就是让隐藏的div显示出来,但是到目前为止,还没有轻松的过渡。
这是我的代码:
HTML:
<div id="header"> <div id="button">This is a Button <div class="content"> This is the Hidden Div </div> </div> </div>
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; 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; }
关于我在做什么错的任何线索吗?当我将鼠标悬停在按钮上时,只是试图为隐藏的内容提供平滑的效果。提前致谢!
display:none;从页面中删除一个块,就好像它从来没有出现过一样。块不能部分显示;它在那儿或不在那里。同样是正确的visibility;您不能指望一个块是hidden定义的一半visible!幸运的是,您可以改用opacity淡入淡出效果。 - 参考作为alternatiiveCSS的解决方案,你可以玩opacity,height而且padding性能达到理想的效果:
display:none;
visibility
hidden
visible
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; }
(由于简洁,省略了供应商前缀。)
#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>