在編寫網(wǎng)站頁面時(shí),常常需要在鼠標(biāo)點(diǎn)擊某個(gè)元素后出現(xiàn)懸浮框。
這個(gè)效果可以通過HTML及CSS代碼實(shí)現(xiàn)。
下面是一個(gè)示例代碼:
<!DOCTYPE html> <html> <head> <style> /* 設(shè)置觸發(fā)彈出懸浮框的元素樣式 */ .tooltip { position: relative; display: inline-block; } /* 設(shè)置彈出懸浮框樣式 */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; } /* 當(dāng)鼠標(biāo)移到元素上時(shí),顯示彈出懸浮框 */ .tooltip:hover .tooltiptext { visibility: visible; } </style> </head> <body> <h2>這是一個(gè)標(biāo)題</h2> <p>當(dāng)鼠標(biāo)移到 <span class="tooltip">這個(gè)元素<span class="tooltiptext">彈出懸浮框</span></span>上時(shí),會(huì)出現(xiàn)一個(gè)懸浮框。</p> </body> </html>
在以上代碼中,使用了兩個(gè)class來實(shí)現(xiàn)懸浮框效果。
首先,設(shè)置了包含彈出框觸發(fā)元素的class為.tooltip,樣式為position: relative和display: inline-block。
然后,設(shè)置了彈出框的class為.tooltiptext,樣式為visibility: hidden、width、background-color、color、text-align、border-radius、padding、position和z-index。
最后,使用:hover偽類來實(shí)現(xiàn)鼠標(biāo)移到.tooltip元素上彈出彈出框的效果。