关于当⿏标悬浮时如何修改⽂字内容，即通过css样式切换⽂字内容
修改⽂字内容，通常是通过 JS 来修改。
当⿏标悬浮时，通常使⽤伪元素:hover 来修改样式，如何在⿏标悬浮时修改html内容？
:hover 是⽆法修改html 内容，但是可以通过⼀系列的样式变化，达到当⿏标悬浮时，改变html内容。
⽤JS可以通过innerHtml来修改，在此不介绍。
纯CSS实现⿏标放上去改变⽂字内容
先上代码 html
<div class="par">
<div class="show">
平时显⽰的⽂字
<div class="hover-show">
⿏标悬浮时显⽰的⽂字
</div>
</div>
</div>
css 部分
.par {
width: 300px;
css鼠标点击样式
height: 30px;
margin: 100px auto;
font-size: 20px;
line-height: 30px;
background-color: #ff000020;
overflow: hidden;
}
.par .show:hover {
padding-top: 30px;
}
.par .hover-show {
margin-top: -60px;
}
实际效果
先把⽗元素的 overflow: hidden; 注释掉看看效果
平常状态
⿏标悬浮时的状态
带有背景⾊的为⽗盒⼦.
思路：
1. 给⽗盒⼦设置⾼度，并且设置溢出隐藏
2. 需要⿏标悬浮时显⽰的⽂字需要嵌套在平时显⽰⽂字的盒⼦⾥
3. 给悬浮时显⽰的⽂字的盒⼦添加 margin-top:-60px，-60px 通常为两倍⾏⾼。
4. 给平时显⽰的⽂字的盒⼦添加⿏标悬浮样式·padding-top: 30px;· 30px 通常为⽂字⾏⾼。
这样就可以达到⿏标悬浮时改变⽂字内容的效果了。
注意：
1. margin 值和 padding 值可根实际情况调整；
2. 嵌套关系为 ⽗元素，平时显⽰⽂字的盒⼦，⿏标悬浮时显⽰的⽂字，后⾯两个盒⼦不能同级，否则⿏标悬浮时，会出现不准确跳动的
问题。