如何在父元素悬停时向子元素添加 CSS3 过渡

【问题标题】：How to add a CSS3 transition to a child element when the parent is hovered如何在父元素悬停时向子元素添加 CSS3 过渡
【发布时间】：2013-07-03 14:35:58
【问题描述】：

<!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <title>CSS Transition</title>
   <style>
     .child{ display: none; }
     .parent:hover > .child{ display: block; }
   </style>
 </head>
 <body>
  <div class="parent">
   <div class="child">Content</div>
  </div>
 </body>
</html>

我在上面创建了一个简单的布局，显示了我想要实现的概念。我现在想做的是做一个 CSS3 过渡，当父级悬停时，这将允许子级缓和。但是，我不知道在哪里放置转换代码，所以它会起作用。

【问题讨论】：

标签： html css transitions

【解决方案1】：

对于隐藏的子div，使用height: 0;和overflow: hidden;代替display: none;，然后在悬停时显示的子div上添加指定高度。这将允许进行过渡。

我会这样做：http://jsfiddle.net/atjG8/1/

.parent {
    background: red;
}
.child {
    overflow: hidden;
    height: 0;
    background: blue;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
    color: white;
}
.parent:hover > .child {
    height: 30px;
    display: block;
}

例如添加了颜色...

【讨论】：