很多網(wǎng)頁中我們都看到當(dāng)鼠標(biāo)滑過一個內(nèi)容時，這個內(nèi)容的背景會改變顏色。設(shè)置鼠標(biāo)滑過背景變色只需用到:hover就可以設(shè)置成功。
語法:div:hover{background-color:red;}
1.創(chuàng)建一個新的html文件。如圖
2.在html文件上找到body標(biāo)簽，在這個標(biāo)簽里創(chuàng)建一個div標(biāo)簽并設(shè)置class類為bg。如圖：
代碼：<div></div>
3.在title標(biāo)簽后創(chuàng)建style標(biāo)簽用來給bg類添加樣式。在這給bg類設(shè)置了一個寬、高和背景顏色。如圖
代碼：
<styletype="text/css">
.bg{
width:150px;
height:150px;
background-color:red;
}
</style>
4.設(shè)置鼠標(biāo)滑過div時背景變色。給bg樣式類添加鼠標(biāo)滑過：hover，然后設(shè)置鼠標(biāo)滑過時的背景顏色。如圖
代碼：
.bg:hover{
background-color:burlywood;
}
5.實用瀏覽器打開。保存好html后使用瀏覽器打開，在鼠標(biāo)沒有滑過div時背景是紅色的，當(dāng)鼠標(biāo)滑過div的時候背景從紅色變?yōu)榱俗厣?/p>
6.所有代碼，可把所有代碼直接復(fù)制到新家的html文件上，保存好后用瀏覽器打開即可看到效果。如圖：
所有代碼：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>鼠標(biāo)滑過背景變色</title>
<styletype="text/css">
.bg{
width:150px;
height:150px;
background-color:red;
}
.bg:hover{
background-color:burlywood;
}
</style>
</head>
<body>
<div></div>
</body>
</html>