位置：首頁 > 遊戲數碼 > 互聯網

css設定鼠標滑過背景變色;鼠標滑過背景變色

互聯網2.46W

在很多網頁中我們都看到當鼠標滑過一個內容時，這個內容的背景會改變顏色。設定鼠標滑過背景變色只需用到 :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>