背景
近期在做一个项目中的前端页面时,需要实现这样一个功能:鼠标移入时,元素中背景色和文字颜色互换。
实现效果如下:
鼠标移入前:
鼠标移入后:
鼠标再移出时恢复原状。
环境
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",
补充
图片时阿里巴巴矢量图标库中下载的。