html - CSS3 隐藏的 div 在悬停时淡入淡出？

Question

我的 jsfiddle 在这里。

http://jsfiddle.net/xC5wN/

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

我试过

-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 值设置为较大的值，这样您就不会意外地剪切您的内容。

Demo

.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;
}