CSS中有一個(gè)比較有趣的效果，就是鼠標(biāo)移出去字體變色的效果。這個(gè)效果可以增加頁(yè)面的互動(dòng)性，讓頁(yè)面變得更加生動(dòng)。

/* 鼠標(biāo)移出去字體變色效果 */
.hover-effect{
color: #333; /* 字體默認(rèn)顏色 */
transition: color 0.3s ease; /* 顏色過(guò)渡效果 */
}
.hover-effect:hover{
color: #f00; /* 鼠標(biāo)移入后字體變紅 */
}

上述代碼展現(xiàn)了一個(gè)簡(jiǎn)單的鼠標(biāo)移出去字體變色的效果。首先，我們?cè)O(shè)置了字體的默認(rèn)顏色為#333。然后，通過(guò)CSS過(guò)渡效果實(shí)現(xiàn)了從默認(rèn)顏色到目標(biāo)顏色的平滑過(guò)渡。最后，我們通過(guò):hover偽類(lèi)選擇器讓字體變紅，從而實(shí)現(xiàn)了鼠標(biāo)移出去字體變色的效果。

可以使用這個(gè)效果來(lái)增加頁(yè)面的命令感或者強(qiáng)制感，比如在導(dǎo)航菜單中，當(dāng)鼠標(biāo)移動(dòng)到某個(gè)導(dǎo)航項(xiàng)上時(shí)，字體顏色發(fā)生變化，以便更好地提示用戶當(dāng)前所選中的導(dǎo)航項(xiàng)。