CSS 實(shí)現(xiàn)氣泡提示框是網(wǎng)頁(yè)開(kāi)發(fā)中經(jīng)常用到的功能,可以通過(guò) CSS 屬性和偽元素來(lái)實(shí)現(xiàn)。
首先,需要?jiǎng)?chuàng)建一個(gè)基本的 HTML 結(jié)構(gòu),包含觸發(fā)氣泡的元素和氣泡本身:
<div class="container"> <button class="btn">觸發(fā)氣泡</button> <div class="tooltip">這是氣泡內(nèi)容</div> </div>
接下來(lái),利用 CSS 屬性和偽元素,對(duì)氣泡進(jìn)行樣式設(shè)置:
.container { position: relative; text-align: center; } .tooltip { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); padding: 5px; background-color: #333; color: #fff; border-radius: 5px; opacity: 0; transition: opacity 0.3s; } .tooltip:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; } .btn:hover + .tooltip { opacity: 1; }
以上代碼中,.container 類設(shè)置了相對(duì)定位,使 .tooltip 絕對(duì)定位時(shí)可以相對(duì)于容器進(jìn)行位置設(shè)置。.tooltip 類設(shè)置了其他樣式,包含了氣泡的背景顏色、文本顏色、邊框圓角等屬性。其中,:after 偽元素為箭頭部分,利用了 border 屬性繪制三角形。最后,.btn:hover + .tooltip 選擇器通過(guò)鼠標(biāo)懸停觸發(fā)氣泡的按鈕來(lái)改變氣泡的透明度,實(shí)現(xiàn)了氣泡的出現(xiàn)和消失效果。