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

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