在很多網頁中我們都看到當滑鼠滑過一個內容時，這個內容的背景會改變顏色。設定滑鼠滑過背景變色只需用到 :hover 即可設定成功。
語法: div:hover{background-color: red;}
（01）建立一個新的html檔案。如圖
（02）在html檔案上找到body標籤，在這個標籤裡建立一個div標籤並設定class類為bg 。 如圖：程式碼：<div class="bg"></div>
（03）在title標籤後建立style標籤用來給bg類新增樣式。在這給bg類設定了一個寬、高和背景顏色。 如圖程式碼：<style type="text/css">{width: 150px;height: 150px;background-color: red;}</style>
（04）設定滑鼠滑過div時背景變色。給bg樣式類新增滑鼠滑過：hover，然後設定滑鼠滑過時的背景顏色。如圖程式碼：:hover{background-color: burlywood;}
（05）實用瀏覽器開啟。儲存好html後使用瀏覽器開啟，在滑鼠沒有滑過div時背景是紅色的，當滑鼠滑過div的時候背景從紅色變為了棕色。、
（06）所有程式碼，可把所有程式碼直接複製到新家的html檔案上，儲存好後用瀏覽器開啟即可看到效果。如圖：所有程式碼：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>滑鼠滑過背景變色</title><style type="text/css">{width: 150px;height: 150px;background-color: red;}:hover{background-color: burlywood;}</style></head><body><div class="bg"></div></body></html>
酷知知識幫
