很多網頁中我們都看到當鼠標滑過一個內容時，這個內容的背景會改變顏色。設置鼠標滑過背景變色只需用到:hover就可以設置成功。
語法:div:hover{background-color:red;}
1.創建一個新的html文件。如圖
2.在html文件上找到body標簽，在這個標簽里創建一個div標簽并設置class類為bg。如圖：
代碼：<div></div>
3.在title標簽后創建style標簽用來給bg類添加樣式。在這給bg類設置了一個寬、高和背景顏色。如圖
代碼：
<styletype="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文件上，保存好后用瀏覽器打開即可看到效果。如圖：
所有代碼：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>鼠標滑過背景變色</title>
<styletype="text/css">
.bg{
width:150px;
height:150px;
background-color:red;
}
.bg:hover{
background-color:burlywood;
}
</style>
</head>
<body>
<div></div>
</body>
</html>