隐藏元素的方法及鼠标悬浮才显示按钮

1、隐藏元素的方法：visibility、opacity、display、z-index区别

visibility: hidden	/	保留物理空间
opacity: 0	opactiy:1	保留物理空间；
display: none	display: block	不会为隐藏对象保留其物理空间，在网页中不占据任何地方；
z-index	z-index:999	设置层级关系，层级关系越大就显示，是覆盖在层级低的元素上

  .box1{
            width: 50px;
            height: 50px;
            background-color: #66ff66;
            visibility: hidden;  	 //保留空间
            	opacity: 0;          //保留空间
            	display: none;       //不保留空间         
        }

2、实例，鼠标悬浮某一块才显示按钮

 <el-card :body-style="{ padding: '0px' }" shadow="never" class="boxCard">
    <div class="company">
      <img :src="card.url"/>
    </div>
    <div class="detailShow">
      <el-button  link @click="toDetail(card.type)">
        查看详情
        <el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
    </div>
  </el-card>

style

.boxCard{
    .company{
      display: flex;
    }
    .detailShow{
      /*display:none;*/
      opacity: 0;
      background-color: rgba(252,157,3,0.5);
      width:100%;
      height:30px;
      display: flex;
      justify-content: center;
    }
    :hover{
      .detailShow{
        /*display:block;*/
        opacity: 1;
      }
    }
  }

此处使用opactiy