CSS懸停彈窗是一種常見的網頁交互效果。當鼠標懸停在元素上時，會彈出一個小窗口，顯示相關的信息或操作。下面我們來看一下實現這一效果的代碼。

/* CSS代碼 */
.popup {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
z-index: 9999;
}
/* 鼠標懸停狀態 */
.element:hover .popup {
display: block;
}

以上代碼使用了偽類:hover，表示當鼠標懸停在.element元素上時，彈出.popup元素。接下來我們介紹一下CSS的具體實現。

首先，.popup元素需要設置為絕對定位，top和left屬性設為100%和50%，即在.element元素下方居中顯示。transform屬性用來居中元素，translateX(-50%)表示往左平移50%的寬度。padding、border、box-shadow等屬性設置彈窗的樣式。z-index則控制彈窗的層級，保證它在其他元素之上。

其次，在鼠標懸停狀態下，.popup元素的display屬性變為block，從而顯示出來。當鼠標移開時，display又變為none，彈窗消失。

總體來說，CSS懸停彈窗是一種不錯的交互效果，讓用戶能夠方便地獲取更多信息或進行相關操作。