CSS3隐藏div在悬停中淡出？ [英] CSS3 hidden div fade on in hover?

问题描述

这里有我的jsfiddle。

I have my jsfiddle here.

http：// jsfiddle.net/xC5wN/

我基本上希望隐藏的div在用鼠标悬停时滑动打开。

I basically want the hidden div to slide open when about is hovered over with a mouse. It's going to be a part of a navigation bar and the description of the page will slow below.

我尝试过使用

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

无效。这是我的代码：

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

推荐答案

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

这篇关于CSS3隐藏div在悬停中淡出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！