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

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

你可能感兴趣的:(vue,html,js,javascript,css)