如何在父元素悬停时向子元素添加 CSS3 过渡 [英] How to add a CSS3 transition to a child element when the parent is hovered
问题描述
<头><meta charset="utf-8"><title>CSS 过渡</title><风格>.child{ 显示:无；}.parent:hover >.child{ 显示:块；}</风格><身体><div class="parent"><div class="child">内容</div></html>
我在上面创建了一个简单的布局，显示了我想要实现的概念.我现在想要做的是做一个 CSS3 过渡，让孩子在父母悬停时缓和.但是，我不知道把转换代码放在哪里，所以它会起作用.
对于隐藏的子 div，使用 height: 0; 和 overflow: hidden; 代替display: none;，然后在悬停时显示的孩子上添加指定的高度.这将允许进行转换.
我会这样做:http://jsfiddle.net/atjG8/1/
.parent {背景:红色；}.孩子 {溢出:隐藏；高度:0；背景:蓝色；-webkit-transition:所有 .8s 的易用性；-moz-transition:所有 .8s 轻松；-ms-transition:所有 .8s 的轻松；-o-transition:所有 .8s 轻松；过渡:所有 .8s 都轻松；白颜色;}.parent:hover >.孩子 {高度:30px；显示:块；}例如添加了颜色...
<!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>
I have created a simple layout above that shows the concept of what I am trying to achieve. What I want to do now is to make a CSS3 transition that will allow the child to ease in when the parent is hovered. However, I do not know where to place the transition code so it will work.
For the child div that is hidden, use height: 0; and overflow: hidden; instead of display: none;, Then add a specified height on the child shown when hovered. This will allow for the transition to take place.
I would do something like this: 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;
}
Colors were added for example...
这篇关于如何在父元素悬停时向子元素添加 CSS3 过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
