Vue实现鼠标悬停，高亮显示指定内容

最新推荐文章于 2024-09-14 11:25:05 发布

按时下班<(￣︶￣)[GO!]

最新推荐文章于 2024-09-14 11:25:05 发布

阅读量1w

点赞数 4

文章标签： vue html js javascript css

本文链接：https://blog.csdn.net/weixin_43732080/article/details/106353895

版权

Vue自带监听“鼠标悬停”方法

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

结合以上两种方法，实现“鼠标悬停在文字上-文字变色，鼠标离开悬停区域-文字复原颜色”

HTML(Template)中：

<div 
    :style="avtivecolor"
    @mouseover="Mouseover()"
    @mouseleave="Mouseleave()">
    悬停区域文字
</div>

data中：

data() {
    return {
      avtivecolor: "color:#b8b8b8", // 悬停区域文字原始颜色
    };
}

methods中：

// 鼠标"悬停"触发此方法
Mouseover() {
    console.log("进入 悬停区域");
    this.avtivecolor = "color:#fede0e"; // 进入 悬停区域,更改文字颜色
},

// 鼠标"离开"触发此方法
categoryMouseleave(index) {
    console.log("离开 悬停区域");
    this.avtivecolor = "color:#b8b8b8"; // 离开 悬停区域,文字颜色复原
}