動圖

<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

總結

以上是生活随笔為你收集整理的css实现浏览历史小块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。