gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:47:29 26 4
gpt4 key购买 nike

<!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 过渡,让 child 在 parent 悬停时缓和。但是,我不知道将转换代码放在哪里才能正常工作。

最佳答案

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

我会这样做: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;
}

例如添加了颜色...

关于html - 如何在悬停父元素时向子元素添加 CSS3 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17489755/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com