vue鼠标悬停文字变色1

朱雀 2023-10-03 19:52 113阅读 0赞

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

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

1、Template

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

2、script

  1. data(){
  2. return{
  3. activeColor:"color : #ffffffb8",//悬停区文字原始颜色
  4. }
  5. },
  6. methods:{
  7. footerEnter(){
  8. this.activeColor="color : #ffffff";//悬停区改变文字原始颜色
  9. },
  10. footerLeave(){
  11. this.activeColor="color : #ffffffb8";//悬停区恢复文字原始颜色
  12. },
  13. },

发表评论

表情:
评论列表 (有 0 条评论,113人围观)

还没有评论,来说两句吧...

相关阅读

    相关 vue鼠标悬停出现悬浮框

    之前遇到一个需求,电商主页中鼠标悬停到某个a标签上面,下面就会出现一个div框,里面有各种选项。这里的主要问题是,如何做到鼠标悬停出现下拉框,并且鼠标移走下拉框和标签后下拉框消

    相关 CSS鼠标悬停

    > 在学习中遇到许多好看的样式,虽然只是用HTML+CSS简单的实现,仅作为我的学习笔记和同爱好学习者的分享: 先看效果 ![这里写图片描述][70] HTM