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

【问题标题】：CSS3 hidden div fade on in hover?CSS3隐藏的div在悬停时淡入淡出？
【发布时间】：2014-01-31 08:18:42
【问题描述】：

我这里有我的 jsfiddle。

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

【问题讨论】：

标签： html css hover css-transitions

【解决方案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;
}

【讨论】：

这是一个改进，但是无论如何 div 是否可以在悬停时滑动打开？

【解决方案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;    
}

【讨论】：

【解决方案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. */
}

【讨论】：