CSS3隐藏的div在悬停时淡入

Question

我在这里有我的jsfiddle。

http://jsfiddle.net/xC5wN/

当鼠标悬停在about上时，我基本上希望隐藏的div能够滑动打开。它将成为导航栏的一部分，下面的页面描述将变慢。

我试过使用

-webkit-transition: all 0.5s ease-in-out;

但无济于事。这是我的代码：

.aboutnav {
background-color: #a661ca;
}
.aboutcontents {
display: none;
}
.aboutnav:hover .aboutcontents {
display: block;
background-color: #a661ca;
}

Answer 1

您不能添加用于显示的转换。您需要考虑通过其他方式隐藏和显示内容，例如max-height和opacity。您需要将非零max-height值设置为较大的值，这样就不会意外地剪辑内容。

演示

.aboutnav {
background-color: #a661ca;
}
.aboutcontents {
max-height: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
}
.aboutnav:hover .aboutcontents {
max-height: 200px;
opacity: 1;
}

Answer 2

您应该更改.aboutcontents的页边空白顶部以使其滑动。由于默认的.aboutcontents隐藏在.aboutnav后面，悬停在.aboutnav上，.aboutcontents向下滑动。

这是一个演示

/* margin and padding reset */
* {
margin:0;
padding:0;
}
h4 {
background-color: #a661ca;
}
.aboutcontents {
background-color: #a661ca;
display: block; /* required for setting margin-top */
margin-top: -100px;
position: relative;
z-index:-1;
transition: margin 0.5s ease-in-out;
}
.aboutnav:hover .aboutcontents {
margin-top: 0px;    
}

Answer 3

现场演示

.aboutnav {
background-color: #a661ca;
overflow:hidden;
max-height:60px;
transition: max-height 1s;
-webkit-transition: max-height 1s;
}
.aboutnav:hover {
max-height:180px;
/* Don't exagerate with this one,
otherwise the initial animation will not be noticable,
just set it to a preferred maximal height. */
}