CSS 能夠實現文字懸浮的效果,具體實現方式如下:
.hover { position: relative; } .hover:hover::before { content: attr(data-hover); position: absolute; top: 100%; left: 0; background-color: #333; color: #fff; padding: 5px; border-radius: 5px; white-space: nowrap; }
首先,需要讓文字所在元素擁有相對定位的屬性,可以將其定義一個名為“hover”的類名。
接著,在該元素的懸浮狀態下,使用偽元素 Before(在元素內容之前插入內容)來添加懸浮的文字。利用屬性選擇器將其內容設置為 data-hover 屬性的值。
利用設置百分比定位,實現在文字底部 100% 的位置展示懸浮文字,效果上看上去就像文字下面展開了一個標簽。
最后,定義懸浮文字樣式,包括背景顏色、文字顏色、內邊距大小等,來使其更加美觀。
上一篇css怎么取消左邊框
下一篇jquery跳轉報錯參數