接下來我們來介紹「偽類選擇器（Pseudo-class Selector）」，也叫「虛擬類別選擇器」。這些選擇器的作用是針對元素在特定狀態下的樣式進行設定。雖然名字裡有「類」，但其實它們不是傳統意義上的類別，而是元素的一種特殊狀態，能夠讓你選擇那些在HTML中無法直接定位的狀態或特徵。

這些偽類通常用冒號 : 後接狀態名稱來表示。

:hover 是我們最常見的偽類選擇器，用於選擇鼠標懸停在元素上的狀態。

從下面的高鐵網站示意圖可以看見，如果將游標停在「早鳥」的按鈕上，早鳥的圖案和文字將會變成褐色

我們也可以在鍵盤按F12，開啟開發人員工具來看到這些偽類，可以看見有很多種不同的偽類，勾選中想預覽的偽類後，就可以看到相關樣式

接下來讓我們看看 :hover 要怎麼使用吧！

💠:hover 基本用法

語法

選擇器:hover {
	屬性: 屬性值;
}

範例

<a href="#">Lala Code</a>

a {
	color: gray;
}

a:hover {
	color: skyblue;
}

以上是一個簡單的連結變色效果，初始文字顏色為灰色，鼠標移上去後會呈現天藍色的文字。

預設文字顏色 gray

游標懸停文字顏色 skyblue

💠實務應用：變形效果

一起試試：[CODEPEN]

除了變換顏色外，我們常看見網站上的元素，我們還可以跟 transform 做搭配，在游標移動上去後，會做一些變形效果，讓網站更活潑

<div class="product-item">
  <img src="https://picsum.photos/260/280?random=1" />
  <h3>Strawberry juice</h3>
  <p>Sweet and Tangy Flavor</p>
</div>

.product-item {
  transition: transform 0.4s;
}

.product-item:hover {
  transform: scale(1.2);
}

從上面的範例可以看見，游標移到卡片上時，卡片將會被放大，在實務的網站上時常可以看見這樣的效果。

💠總結

:hover 用於選擇鼠標懸停在元素上的狀態，可以為網站增添生動活潑的效果

本文將同步更新至 Lala Code