有時候我們需要在界面上增加一些提示信息,可以通過鼠標移動至指定區(qū)域來展示信息。這種行為被稱作“懸浮提示”(Tooltip)。在 HTML 和 CSS 中,可以使用標簽和 CSS 樣式來實現(xiàn)這一效果。
當(dāng)鼠標移動到一個元素上時,我們可以利用:hover
偽類來添加樣式,當(dāng)鼠標移出該元素時,也可以通過類似的方式實現(xiàn)移除樣式的效果。
/* 超鏈接懸停效果 */ a:hover { text-decoration: underline; color: red; } /* 懸浮提示效果 */ .tooltip { position: relative; display: inline-block; } .tooltip-content { display: none; position: absolute; top: 100%; left: 0; z-index: 999; } .tooltip:hover .tooltip-content { display: block; } .tooltip:hover { /* 添加其他樣式 */ }
其中,:hover
偽類用于選中鼠標懸停時的元素,.tooltip:hover
用于選中鼠標懸浮時的元素,這兩者使用方式相似。并且在后者中,我們還需要使用.tooltip:hover .tooltip-content
選擇器來選中懸浮提示中需要展示內(nèi)容的部分。
通過以上代碼,我們可以實現(xiàn)懸浮提示的效果,并且在鼠標離開該區(qū)域時,樣式也會被移除,讓界面更加簡潔。