CSS中hover有哪些常見用法

在CSS中，hover偽類選擇器用于為鼠標(biāo)懸停在元素上時(shí)的元素應(yīng)用樣式。以下是一些常見的hover用法：

1. 改變顏色：

a:hover {
  color: red;
}

當(dāng)鼠標(biāo)懸停在鏈接上時(shí)，鏈接的顏色會(huì)變?yōu)榧t色。

2. 改變背景顏色：

button:hover {
  background-color: blue;
}

當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，按鈕的背景顏色會(huì)變?yōu)樗{(lán)色。

3. 顯示隱藏元素：

div:hover #hidden-element {
  display: block;
}

當(dāng)鼠標(biāo)懸停在div元素上時(shí)，會(huì)顯示ID為hidden-element的元素。

4. 改變尺寸：

div:hover {
  width: 200px;
  height: 200px;
}

當(dāng)鼠標(biāo)懸停在div元素上時(shí)，div的尺寸會(huì)變?yōu)?00px x 200px。

5. 添加過渡效果：

a:hover {
  color: red;
  transition: color 0.3s ease;
}

當(dāng)鼠標(biāo)懸停在鏈接上時(shí)，鏈接的顏色會(huì)在0.3秒內(nèi)平滑地過渡到紅色。

6. 鼠標(biāo)移出時(shí)恢復(fù)原狀：

a:hover, a:hover:after {
  color: blue;
}
a:hover:after {
  content: " (hover me)";
}
a:not(:hover):after {
  content: "";
}

當(dāng)鼠標(biāo)懸停在鏈接上時(shí)，鏈接的文字顏色會(huì)變?yōu)樗{(lán)色，并顯示" (hover me)“。當(dāng)鼠標(biāo)移出鏈接時(shí)，文字顏色恢復(fù)為原色，同時(shí)” (hover me)"也會(huì)消失。

這些只是hover的一些基本用法，實(shí)際上hover可以與其他CSS屬性和選擇器結(jié)合使用，實(shí)現(xiàn)更豐富的交互效果。