需求
鼠标悬浮，胶囊大小变换，部分数据隐藏
使用技术
transition+width
实现效果
实现思路
是根据视频学习的，因为平时工作中主要用的都是组件，看到这个问题的第一点想到的当然也是hover，使用hover进行鼠标悬浮功能的样式修改，但是对于opcity: 0; width: 0属实是我没想到的，还有transition的使用不熟练
话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.char1 {
background-color: red;
border-radius: 40px;
height: 100px;
display: flex;
margin: auto;
padding: 20px;
/*固定宽度的话，文字居中样式*/
/*width: 400px;*/
/*align-items: center;*/
/*justify-content: center;*/
}
.char1 > .child1 {
font-size: 80px;
color: #fff;
transition: 1s;
}
.hide {
opacity: 0;
width: 0;
}
.char1:hover >span.hide {
opacity: 1;
width: 70px;
}
</style>
</head>
<body>
<div class="char1">
<span class="child1">A</span>
<span class="child1 hide">B</span>
<span class="child1 hide">C</span>
<span class="child1 hide">D</span>
<span class="child1">E</span>
<span class="child1">F</span>
</div>
</body>
</html>
如果写了transition必须搭配width，同时，如果width不固定，样式上会有重叠，感官不好
