在前端開發中,CSS(層疊樣式表)是一個非常重要的技能之一。CSS不僅可以控制網站的布局,還可以美化網站的各個元素。今天我們將學習如何使用CSS讓鼠標移動時文字變色。
要實現文字變色的效果,我們需要先給文本設置一個默認的顏色。比如:
p { color: black; }
上述代碼表示在p標簽中的文本默認顏色為黑色。
接下來,我們需要使用:hover偽類選擇器。它可以在鼠標懸停在p標簽上時改變文本的顏色。如下所示:
p:hover { color: red; }
上述代碼表示當鼠標懸停在p標簽上時,文本顏色將變為紅色。
實際運用時,我們可以將上述代碼添加到樣式表中,或者直接在HTML文件中的style標簽里添加。如下所示:
<style> p { color: black; } p:hover { color: red; } </style>
這樣,我們就成功地實現了鼠標移動時文字變色的效果。