css hover 隐藏与显示（替换）

我这里是写在vue 项目里面的，style用的是less，上代码
核心思想：固定父盒子的宽高，移动子盒子的位置，实现显示与隐藏
大概的原理：
1.1：给父盒子（class="gafa_school"）设置一个固定高度 （我这里设置64px）
1.2: 给每个子盒子也设置一个高度，这里高度和父盒子高度2倍（128px）
1.3:子盒子里面有两个数据，因为我们的父盒子已经设置了高度，我还设置了一个溢出隐藏overflow:hidden,就是当子盒子的高度大于父盒子的时候，最多只能显示64px，还有一半是隐藏的
1.4：这个时候我们可以控制子盒子的margin来决定显示和隐藏
1.5：当鼠标经过子盒子的时候，我们的子盒子向上-64px
2.div的代码

<div v-for="(item,index) in categoryList" :key="index" @click="handlleToggle(item.id)" :class="['gafa_school',currentId===item.id?'gafa_click':''] " >
              <div class="itemnameEN"><span class="span_cn">{{item.name}}</span><br/><span class="span_en">{{item.nameEN}}</span></div>
 </div>

3.css的样式

.gafa_click{
  .itemnameEN{
    margin-top:-64px;
  }
}
.gafa_school {
  height: 64px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 40px;
  .itemnameEN {
    font-size: 28px;
    color: #000;
    height: 128px;
    line-height: 64px;
    overflow: hidden;
    .span_cn {
      font-size: 48px;
      color: #fff;
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
      font-weight: 500;
    }
    .span_en {
      text-shadow: none;
    }
  }
  &:hover .itemnameEN{
    margin-top: -64px;
  }
}