前端：鼠标移入时背景和文字颜色反转

背景

近期在做一个项目中的前端页面时，需要实现这样一个功能：鼠标移入时，元素中背景色和文字颜色互换。

实现效果如下：

鼠标移入前：

鼠标移入后：

鼠标再移出时恢复原状。

 

 

环境

Vue2

代码

元素

<div
        class="show_card"
        :style="{ backgroundColor: bgColor1, color: textColor1 }"
        @mouseenter="
          bgColor1 = '#fff';
          textColor1 = '#409EFF';
        "
        @mouseleave="
          bgColor1 = '#409EFF';
          textColor1 = '#fff';
        "
      >
        <img src="@/assets/imgs/introduce/icon/sharpicons_Cow.png" alt="" />
        牛
        <br />
        识别率：98.2%
      </div>

JS

在Vue的Data中声明一下就行：

bgColor1: "#409EFF",

textColor1: "#fff",

补充

图片时阿里巴巴矢量图标库中下载的。