我們在做導(dǎo)航標(biāo)簽的時候,有時會出現(xiàn)空間過于擁擠需要隱藏部分內(nèi)容的情況,所以在這里我自己寫了一個鼠標(biāo)懸停顯示擴展內(nèi)容的效果,如下圖所示。
總的來說效果還是比較好實現(xiàn),但是比較頭疼的是三角部分使用了偽元素::after,而對父元素設(shè)置 over-flow:hidden 時也會把偽元素給隱藏掉。最后想的辦法是把文字和圖標(biāo)用一個 <span> 包裹住然后對其設(shè)置over-flow屬性。
HTML代碼:
新聞熱點
疑難解答