效果
当鼠标悬浮在元素上时,元素高度由0变为自适应
可以配合点击事件实现手风琴效果
代码
<body>
<div class="wrapper">
<div class="list">
<p>当鼠标悬浮在该元素上的时候,高度从0变为自适应</p>
<p>当鼠标悬浮在该元素上的时候,高度从0变为自适应</p>
<p>当鼠标悬浮在该元素上的时候,高度从0变为自适应</p>
</div>
</div>
<style>
.wrapper {
display: grid;
grid-template-rows: 0fr;
transition: all 0.5s ease;
background-color: pink;
padding: 30px;
}
.list {
overflow: hidden;
}
.wrapper:hover {
grid-template-rows: 1fr;
}
</style>
</body>