<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Collapse</title>
<style>
.title {
cursor: pointer;
}
.title:hover + .collapse {
grid-template-rows: 1fr;
}
.collapse {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
}
.collapse > div {
background-color: #77a0f1;
overflow: hidden;
}
</style>
</head>
<body>
<div class="title">title</div>
<div class="collapse">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, amet architecto commodi debitis dolores
et facere fugit laborum libero minus molestiae, molestias necessitatibus quam qui, ut. Facere odio
repellendus sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequatur cumque debitis dicta error
eum illum, laborum magnam modi neque nihil nostrum officiis pariatur perferendis quasi, qui soluta vero
voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eum, hic nulla pariatur praesentium
quis quo voluptas. Amet, culpa delectus doloribus, dolorum eaque eligendi eveniet harum hic magni
repudiandae voluptatibus.</p>
</div>
</div>
</body>
</html>
9199
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
