鼠标悬浮滚动（纯css）

HTML:

<ul class="power">
  <li>
  <span>实时功耗：</span>
  <span>{{ shaminerObj.power | powerFormate }}</span>
  </li>
  <li>
  <span>预估日电费：</span>
  <span>{{ shaminerObj.electricCost / 100 }}</span>
  </li>
</ul>

CSS:

.power{
    height: 28px;
    overflow: hidden;
    >li{
    transition: all 0.5s;
    display: flex;
    align-items: center;
    }
    &:hover{
    >li:first-child{
    margin-top: -28px;
    }
    }
}

悬浮前正常显示的内容

悬浮后内容自动显示算力曲线