react / vue中 鼠标移入后 改变循环渲染出的子节点的文本内容

抽象出一个场景：

循环渲染出若干个按钮，鼠标移入后，按钮的文本内容改变

import styles from './index.module.less'

export default function index() {

    const list=[{key:1,name:'可乐'},{key:2,name:'雪碧'},{key:3,name:'芬达'}]

  return (
    <>
    {
        list.map(item=>{
           return <button key={item.key} className={styles.btn}>{item.name}</button>
        })
    }
    </>
  )
}

如果要通过react中的操作来改变节点的内容，是比较复杂的

我们可以在鼠标移入后，生成伪元素：：before，子绝父相定位，覆盖原来的子节点就可以了

在css文件中：

.btn {
    position: relative;
    padding: 20px;
    background-color: #fff;
    font-size: 16px;

    &:hover::before {
        content: '立即购买';
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 20px;
        box-sizing: border-box;
        display: block;
        background-color: #fff;
        line-height: 100%;
    }
}

效果如图：