1.当你鼠标划过的时候div显示与隐藏。
直接上代码html
<div class="title">
<h1>仓库实时储量情况</h1>
</div>
<img
src="/static/img/b1.png"
alt=""
class="b1"
@mouseenter="enter1"
@mouseleave="leave1"
/>
弹出来的内容
<div class="a11" v-show="seen">
<p>{{ list[1].ut }}</p>
</div>
<script>
export default {
name: "",
components: {},
data() {
return {
seen: false,
}
}
</script>
方法里:
methods: {
enter: function () {
this.seen = true;
},
leave: function () {
this.seen = false;
},
}
这是最开始的效果
点击图片弹出消息