在網(wǎng)頁設計中，有時需要在某個區(qū)塊上添加更多的提示信息，像是文字、圖片等，而使用CSS來實現(xiàn)這些功能是最為便捷的方式之一。其中，鼠標懸停顯示文字就是非常實用的技巧，讓用戶更好地理解頁面的內(nèi)容。首先，我們需要給需要添加提示信息的元素添加一個class，比如這里我們命名為“tooltip”：
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}然后，在CSS中添加偽元素“::after”和“::before”，將其內(nèi)容設為即將顯示的文字，以及樣式為實心白色，黑色邊框的提示框：
.tooltip::after {
content: "這是提示信息";
position: absolute;
background-color: white;
color: black;
padding: 5px;
border: 1px solid black;
}接著，將提示信息的位置設為位于父元素的底部中央：
.tooltip:hover::after {
display: block;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
}最后，當鼠標懸停在“tooltip”這個元素上時，提示信息就會出現(xiàn)了：
<p class="tooltip">鼠標懸停在這里，就可以看到提示信息了</p>通過這個簡單的CSS技巧，我們可以在網(wǎng)頁中非常方便地添加提示信息，提供更好的用戶體驗。
