對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，有時(shí)候需要用到鼠標(biāo)懸停顯示文字的功能，這可以通過(guò)CSS來(lái)實(shí)現(xiàn)。下面我們來(lái)看一下如何用CSS設(shè)置鼠標(biāo)懸停顯示文字。

/*定義顯示文字的樣式*/
.tooltip {
position: relative;
display: inline-block;
/*定義文字背景顏色和字體顏色*/
background-color: #555;
color: #fff;
/*設(shè)置文字的邊框樣式*/
border-radius: 5px;
padding: 5px;
opacity: 0;
transition: opacity 0.3s;
}
/*鼠標(biāo)懸停時(shí)，顯示文字*/
.tooltip:hover::after {
content: "";
position: absolute;
/*設(shè)置文字框的位置*/
top: 100%;
left: 50%;
margin-left: -60px;
width: 120px;
height: 30px;
/*設(shè)置文字框的樣式*/
background-color: #555;
color: #fff;
border-radius: 5px;
padding: 5px;
opacity: 0;
transition: opacity 0.3s;
/*設(shè)置文字框的箭頭*/
border-bottom: 8px solid #555;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/*鼠標(biāo)懸停時(shí)，顯示文字*/
.tooltip:hover::after {
opacity: 1;
top: -5px;
}

如上所述，我們首先定義了顯示文字的樣式，包括文字背景顏色、字體顏色、邊框樣式等。然后在鼠標(biāo)懸停時(shí)，設(shè)置文字框的位置、樣式和箭頭，最后通過(guò)CSS控制文字框的顯示和隱藏。

以上就是如何用CSS設(shè)置鼠標(biāo)懸停顯示文字的方法，這樣設(shè)計(jì)出來(lái)的網(wǎng)頁(yè)更加美觀大方，讓用戶的體驗(yàn)更加舒適。