如何使用CSS實(shí)現(xiàn)懸停效果？

在CSS中，我們可以使用:hover偽類來實(shí)現(xiàn)懸停效果。:hover偽類用于選擇鼠標(biāo)指針懸停在元素上時(shí)的樣式。

我們可以將一個(gè)元素的背景色在懸停時(shí)改變?yōu)榛疑?/p>

div:hover {
  background-color: gray;
}

上述代碼表示，當(dāng)鼠標(biāo)指針懸停在div元素上時(shí)，該元素的背景色會(huì)變?yōu)榛疑?/p>

除了背景色，我們還可以改變懸停元素的邊框、字體顏色等樣式。

div:hover {
  border: 2px solid red;
  color: white;
}

上述代碼表示，當(dāng)鼠標(biāo)指針懸停在div元素上時(shí)，該元素的邊框會(huì)變成2像素寬的紅線，字體顏色會(huì)變?yōu)榘咨?/p>

需要注意的是，:hover偽類只適用于可點(diǎn)擊的元素，如div、a、button等，對(duì)于不可點(diǎn)擊的元素，如span、img等，無法使用:hover偽類來實(shí)現(xiàn)懸停效果。

我們還可以使用JavaScript或jQuery等JavaScript框架來實(shí)現(xiàn)更豐富的懸停效果，如淡入淡出、旋轉(zhuǎn)等，但這些都是***用法，需要一定的JavaScript編程經(jīng)驗(yàn)，對(duì)于初學(xué)者來說，掌握基本的CSS懸停效果已經(jīng)足夠了。