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