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

Question

我在这里有我的jsfiddle。

http://jsfiddle.net/xC5wN/

我基本上希望隐藏的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;
}

Answer 2

您应该更改.aboutcontents的margin-top以使其滑动。默认.aboutcontents隐藏在.aboutnav后面，悬停在.aboutnav上，.aboutcontents向下滑动。

<强> Here's a demo

/* 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

的 LIVE DEMO 的

.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. */
}