在CSS中，鼠標(biāo)懸停顯示文字是一種非常常見的效果。這種效果可以讓用戶在鼠標(biāo)懸停在某個元素上時(shí)，在下方或者上方顯示出與該元素相關(guān)的文字或者信息。
要實(shí)現(xiàn)這種效果，可以使用CSS中的:hover偽類來實(shí)現(xiàn)。首先，在HTML文件中創(chuàng)建一個元素（如
或等），并設(shè)置其相應(yīng)的樣式，比如字體，字號，顏色等等。然后，將該元素的display屬性設(shè)置為none，這樣它就不會在頁面中顯示出來了。
.box{
font-size: 16px;
color: #333;
position: relative;
}
.box .tip{
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 10px;
font-size: 14px;
color: #666;
}接下來，在CSS文件中使用:hover偽類，為該元素設(shè)置一個新的樣式，將display屬性設(shè)置為block，這樣它就會在鼠標(biāo)懸停時(shí)顯示出來，并在下方或者上方顯示出與該元素相關(guān)的文字或者信息。
.box:hover .tip{
display: block;
}比如說，我們可以為一個圖片添加這樣的效果：
<div class="box"><img src="example.jpg" alt="Example">
<span class="tip">這是一個示例圖片。</span>
</div>當(dāng)鼠標(biāo)懸停在該圖片上時(shí)，會在下方顯示出：“這是一個示例圖片?！边@樣的文字。
簡單又實(shí)用，鼠標(biāo)懸停顯示文字效果一般會被運(yùn)用在網(wǎng)頁導(dǎo)航、圖片等位置，能夠給用戶更好的互動體驗(yàn)，增加使用者的交互體驗(yàn)。