html:
<div class="imageMap" @mouseenter="enter" @mouseleave="leave">
<el-image class="imageData" style="width:100%;height:298px" :src="imagePathData" fit="cover">
</el-image>
<el-button class="openMap" v-if="showContent">打开地图</el-button>
</div>
js:
data(){
return{
//缩略图
imagePathData: require('@/views/data/manage/image/tupian.jpg''),
//鼠标经过缩略图页面,显示“打开地图”按钮
showContent: false,
}
}
//监听鼠标经过缩略图时,显示“打开地图”按钮,离开时消失
enter () {
this.showContent = true
},
leave () {
this.showContent = false
}
css:
.imageMap {
position: relative;
}
.imageData {
position: absolute;
top: 0;
left: 0;
}
.openMap {
position: absolute;
top: 2px;
left: 40%;
width: 20%;
height: 30px;
color: #fff;
background-color: #03090f9e;
border-width: 0;
}