在網頁設計中，CSS 字體劃上去變色這個鼠標經過效果是非常常見的，可以讓頁面更加生動而不單調。下面我們來介紹一下如何實現此效果。 首先，需要在 CSS 中定義文字的樣式，比如設置字體、大小、顏色等屬性。例如，我們可以定義一個樣式類：

p {
font-family: Arial;
font-size: 16px;
color: #333;
}

接著，使用:hover 偽類選擇器來定義鼠標懸停時文字的樣式。例如，我們可以將文字顏色設置為紅色：

p:hover {
color: red;
}

在運用到實際網頁中時，只需要給需要變色的字體添加該樣式類即可：

<p class="hover-effect">這是一段文字。</p>

當鼠標懸停在這段文字上時，該段文字的顏色會從 #333 變成紅色。 除了改變文字顏色，還可以改變文字的背景顏色、加粗等效果。樣式類和:hover 偽類的運用方式類似，下面以背景顏色變化效果為例：

/*定義樣式類*/
p {
font-family: Arial;
font-size: 16px;
color: #333;
background-color: #fff;
}
/*定義懸停效果*/
p:hover {
background-color: #f0f0f0;
}

當鼠標懸停在文字上時，文字的背景顏色會從白色變為灰色。 總之，使用 CSS 實現文字懸停效果非常簡單且常用，用好了可以讓頁面更加生動有趣，值得我們學習和掌握。