CSS實(shí)現(xiàn)鼠標(biāo)移上去效果的方法

在CSS中，我們可以使用偽類:hover來實(shí)現(xiàn)鼠標(biāo)移上去的效果，這個(gè)偽類可以應(yīng)用于任何元素，當(dāng)鼠標(biāo)懸停在該元素上時(shí)，可以觸發(fā)一些樣式變化。

我們可以將一個(gè)按鈕的背景色在鼠標(biāo)移上去時(shí)變?yōu)榧t色：

button:hover {
  background-color: red;
}

或者，我們可以將一段文本在鼠標(biāo)移上去時(shí)變?yōu)樗{(lán)色：

p:hover {
  color: blue;
}

我們還可以使用transition屬性來平滑地過渡樣式變化，使得效果更加自然：

button:hover {
  background-color: red;
  transition: background-color 0.3s ease;
}

代碼會(huì)在鼠標(biāo)移上去時(shí)，將按鈕的背景色變?yōu)榧t色，并且背景色的變化會(huì)在0.3秒內(nèi)平滑過渡。

需要注意的是，:hover偽類僅適用于支持CSS的用戶，且需要鼠標(biāo)懸停在元素上方才會(huì)觸發(fā)樣式變化，在使用時(shí)需要謹(jǐn)慎考慮其兼容性和用戶體驗(yàn)。