[css]卡片鼠标滑过操作

1. 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>

2. 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;
  }