本文目錄導讀：

1. 圖片放大
2. 圖片變色
3. 添加邊框

CSS偽類hover控制圖片的方法

在CSS中，偽類hover是一種非常實用的技術，可以用來控制圖片在鼠標懸停時的樣式變化，通過巧妙地利用偽類hover，我們可以實現(xiàn)圖片放大、變色、添加邊框等多種效果，提升用戶體驗。

圖片放大

當鼠標懸停在圖片上時，可以通過CSS偽類hover將圖片放大，我們可以將圖片放大到原來的1.5倍：

img:hover {
  transform: scale(1.5);
}

圖片變色

通過改變圖片的背景色或邊框色，可以讓圖片在鼠標懸停時呈現(xiàn)出不同的顏色，我們可以將圖片的背景色變?yōu)榧t色：

img:hover {
  background-color: red;
}

或者，我們可以給圖片添加一個紅色的邊框：

img:hover {
  border: 2px solid red;
}

添加邊框

在鼠標懸停時，可以給圖片添加一個邊框，使其更加突出，我們可以給圖片添加一個2像素寬的黑色邊框：

img:hover {
  border: 2px solid black;
}

通過以上方法，我們可以利用CSS偽類hover對圖片進行精細化的控制，提升用戶體驗，除了以上方法，CSS偽類hover還可以實現(xiàn)更多有趣的效果，比如圖片翻轉(zhuǎn)、透明度變化等，在實際應用中，我們可以根據(jù)具體需求進行靈活使用。