vue鼠标悬停文字变色1

最新推荐文章于 2024-07-02 18:57:55 发布

ZhangChuChu_9248

最新推荐文章于 2024-07-02 18:57:55 发布

阅读量2.1k

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_45991812/article/details/126250896

版权

@mouseover(): 鼠标"进入"悬停区域，触发此方法

@mouseleave(): 鼠标"离开"悬停区域，触发此方法

1、Template

<div class="introduceLittleTitle"
                     @mouseenter="footerEnter()"
                     @mouseleave="footerLeave()"
                     :style="activeColor"><span>健康风险评估中心</span></div>

2、script

  data(){
    return{
      activeColor:"color :  #ffffffb8",//悬停区文字原始颜色

    }
  },
  methods:{
    footerEnter(){
      this.activeColor="color : #ffffff";//悬停区改变文字原始颜色
    },
    footerLeave(){
      this.activeColor="color :  #ffffffb8";//悬停区恢复文字原始颜色
    },
  },