css實現瀏覽歷史小塊

動圖

<div class="browse-history">
      <span class="history-icon"></span>
      <span class="history-txt">瀏覽歷史</span>
</div>

.browse-history {
    position: absolute;
    top: -40px;
    right: 0;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    &:hover {
      .history-icon {
        display: none;
      }
    }
    .history-icon {
      display: inline-block;
      margin: 8px;
      width: 24px;
      height: 24px;
      background: url("~@/assets/icon/browse-history.svg");
      background-size: cover;
    }
    .history-txt {
      display: inline-block;
      padding: 8px;
      font-size: 12px;
      color: @azure-6;
    }
  }

主要利用overflow和hover