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"; // 离开 悬停区域,文字颜色复原
}