效果图
- html代码
<div class="dataCard">
<div class="el-card">
<div class="el-card__body" style="padding: 20px; text-align: center;">
<img data-v-23684360="" src="/static/img/dataCard-def.d29358f.png" alt="">
</div>
</div>
<div class="dataCard-cover">
<a data-v-23684360="" href="#">查看</a>
<a data-v-23684360="" href="#">删除</a>
<a data-v-23684360="" href="#">导出</a>
<a data-v-23684360="" href="#">分析</a>
</div>
</div>
- css代码
.dataCard-cover{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.1);
border-radius: 5px;
border: 1px solid #1b66e7;
text-align: center;
vertical-align: middle;
line-height: 202px;
}
.dataCard:hover .dataCard-cover{
display: block;
}
.dataCard-cover > a{
color: #1b66e7;
font-size: 16px;
cursor: pointer;
margin: 0 10px;
}
