vue html自带鼠标悬停

Vue HTML自带的鼠标悬停方法有 @mouseover()和@mouseleave()。通过使用这两个方法，可以实现鼠标悬停在文字上时文字变色，鼠标离开悬停区域时文字复原颜色的效果。在HTML模板中，可以使用以下代码实现：

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

在data属性中，需要定义一个变量来保存悬停区域文字的原始颜色，代码如下：

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

然后，在methods属性中，定义两个方法来处理鼠标悬停和离开的事件，代码如下：

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

这样，当鼠标悬停在悬停区域文字上时，文字的颜色会变为"#fede0e"，当鼠标离开悬停区域时，文字颜色会恢复为"#b8b8b8"。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue实现鼠标悬停，高亮显示指定内容](https://blog.csdn.net/weixin_43732080/article/details/106353895)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [vue 使用html自带title属性 鼠标悬浮展示内容 修改其样式](https://blog.csdn.net/m0_49515138/article/details/121701573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [二开ChatGPT微信小程序源码 AI聊天微信小程序源码 适配H5和WEB端 支持AI聊天次数限制.rar](https://download.csdn.net/download/winkexin/88244216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]