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

<img src="example.jpg" class="tooltip" data-tooltip="這是一個(gè)例子">
<button class="tooltip" data-tooltip="點(diǎn)擊我">按鈕</button>

然后，在CSS中設(shè)置鼠標(biāo)懸停時(shí)的樣式，用到了偽類選擇器“:hover”。當(dāng)鼠標(biāo)懸停在具有.tooltip類的元素上時(shí)，就會(huì)顯示相應(yīng)的提示框。提示框可以用偽元素“::before”和“::after”來實(shí)現(xiàn)，設(shè)置其內(nèi)容為元素的自定義屬性“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”是偽元素，用來在元素前后插入內(nèi)容。其中，提示框設(shè)置了背景顏色、內(nèi)邊距、圓角等CSS屬性，可以根據(jù)需要自行調(diào)整。 最終效果如下：按鈕這只是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)示例，不同的網(wǎng)頁需要根據(jù)具體需求和設(shè)計(jì)，進(jìn)行相應(yīng)的樣式設(shè)計(jì)。但不管怎樣，通過CSS鼠標(biāo)浮上顯示名字，可以更好地提升網(wǎng)頁的用戶體驗(yàn)和交互性。