CSS鼠標浮上顯示名字 想要在網頁中添加一些小特效，會讓網站看起來更好看，更有趣。其中，一種簡單而且實用的特效是，當鼠標懸停在某個元素上時，能夠彈出一個提示，顯示這個元素的名字或者其他相關信息。 這個特效的實現非常簡單，只需要用CSS添加一些鼠標懸停時的樣式即可。 首先，我們需要在HTML中設置需要提示的元素，比如一個圖片或者一個按鈕。可以在元素的class或者id里寫入一個自定義屬性，比如“data-tooltip”，用來存儲提示的內容。

<img src="example.jpg" class="tooltip" data-tooltip="這是一個例子">
<button class="tooltip" data-tooltip="點擊我">按鈕</button>

然后，在CSS中設置鼠標懸停時的樣式，用到了偽類選擇器“:hover”。當鼠標懸停在具有.tooltip類的元素上時，就會顯示相應的提示框。提示框可以用偽元素“::before”和“::after”來實現，設置其內容為元素的自定義屬性“data-tooltip”。

.tooltip {
position: relative;
}
.tooltip:hover::before {
content: attr(data-tooltip);
position: absolute;
top: -30px; 
left: 50%;
transform: translateX(-50%);
background-color: #000;
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
}
.tooltip:hover::after {
content: "";
position: absolute;
top: -10px; 
left: 50%;
transform: translateX(-50%) rotate(45deg);
background-color: #000;
width: 12px;
height: 12px;
}

以上代碼中，“::before”和“::after”是偽元素，用來在元素前后插入內容。其中，提示框設置了背景顏色、內邊距、圓角等CSS屬性，可以根據需要自行調整。 最終效果如下：按鈕這只是一個簡單的實現示例，不同的網頁需要根據具體需求和設計，進行相應的樣式設計。但不管怎樣，通過CSS鼠標浮上顯示名字，可以更好地提升網頁的用戶體驗和交互性。