在CSS中，鼠標懸停顯示文字是一種非常常見的效果。這種效果可以讓用戶在鼠標懸停在某個元素上時，在下方或者上方顯示出與該元素相關的文字或者信息。
要實現這種效果，可以使用CSS中的:hover偽類來實現。首先，在HTML文件中創建一個元素（如
或等），并設置其相應的樣式，比如字體，字號，顏色等等。然后，將該元素的display屬性設置為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偽類，為該元素設置一個新的樣式，將display屬性設置為block，這樣它就會在鼠標懸停時顯示出來，并在下方或者上方顯示出與該元素相關的文字或者信息。
.box:hover .tip{
display: block;
}比如說，我們可以為一個圖片添加這樣的效果：
<div class="box"><img src="example.jpg" alt="Example">
<span class="tip">這是一個示例圖片。</span>
</div>當鼠標懸停在該圖片上時，會在下方顯示出：“這是一個示例圖片?！边@樣的文字。
簡單又實用，鼠標懸停顯示文字效果一般會被運用在網頁導航、圖片等位置，能夠給用戶更好的互動體驗，增加使用者的交互體驗。
上一篇css中黃色的表達
下一篇css中高級選擇器的語法