1，鼠标点击显示隐藏，样式可以自己调，我就写个dome。
<div class="min"> <button @click="change">点击我</button> <div v-show="show"> 显示隐藏的内容 </div> </div>
<script>
export default {
name: "testresult",
data() {
return {
show: false
};
},
methods: {
change() {
this.show = !this.show;
}
}
};
</script>
鼠标移动上去事件：
html：
<div class="min"> <button class="cancelbtn" @mouseover="mouseover(n)" @mouseleave="mouseleave" v-show="isshow & (n == id)" > 取消</button ><br /> <button class="followbtn" @mouseover="mouseover(n)" @mouseleave="mouseleave" > 关注 </button> </div>
js
<script> export default { name: "testresult", data() { return { isshow: false, id: 0 }; }, methods: { // 移入 mouseover(id) { this.id = id; clearTimeout(this.timer); this.isshow = true; }, // 移出 mouseleave() { this.timer = setTimeout(() => { this.isshow = false; }, 100); } } }; </script>
css：
.followbtn { width: 50px; height: 30px; text-align: center; background-color: coral; color: #ffffff; border: 0; } .cancelbtn { width: 50px; height: 30px; text-align: center; background-color: brown; color: #ffffff; border: 0; }
效果图：