效果如图:
鼠标移入显示二维码,鼠标移走二维码隐藏。
<a
class="mouseaction"
@mouseover="mouseover"
@mouseleave="mouseleave"
>
<img class="wxlogo" src="./images/wxlogo.png" />
</a>
<!-- 先隐藏 -->
<div class="wximg" v-show="yc">
<img class="wximg" src="./images/gao.jpg" />
</div>
<a
class="mouseaction2"
@mouseover="mouseover2"
@mouseleave="mouseleave2"
>
<img class="miniwx" src="./images/miniprograms.png" />
</a>
<!-- 先隐藏 -->
<div class="miniwximg" v-show="yc2">
<img class="miniwximg" src="./images/gao.jpg" />
</div>
methods: {
mouseover() {
// 鼠标移入事件mouseover
this.yc = true;
},
mouseleave() {
// 鼠标移出事件mouseleave
this.yc = false;
},
mouseover2() {
// 鼠标移入事件mouseover
this.yc2 = true;
},
mouseleave2() {
// 鼠标移出事件mouseleave
this.yc2 = false;
},
},