div从隐藏到显示且高度自适应，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6

            
            <div class="hover-dom">Hover Me</div>
<div class="grid-container">
  <div>
    <p>这里是自适应的一段文字，用来测试hover的时候展示并使显示的div高度自适应。。。从现在开始就是随便加的文字了，没有必要细看、、、、</p>
  </div>
</div>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

            
            .hover-dom {
  background: blueviolet;
  width: 100px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-top: 30px;
  margin-left: 30px;
}
.grid-container {
  display: grid;
  margin-left: 30px;
  grid-template-rows: 0fr;
  transition: .5s ease-in-out;
}
.grid-container > div {
  overflow: hidden;
  text-align: justify;
  padding-inline: 20px;
  width: 200px;
  background: #ffeecc;
}
.hover-dom:hover + .grid-container {
  grid-template-rows: 1fr;
}

格式化

预览

控制台