妙知谷css設置鼠標滑過背景變色;鼠標滑過背景變色
- 互聯網
- 關注：2.33W次
在很多網頁中我們都看到當鼠標滑過一個內容時，這個內容的背景會改變顏色。設置鼠標滑過背景變色只需用到 :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>
- 文章版權屬於文章作者所有，轉載請註明 https://miaozhigu.com/sm/hulianwang/z3d13.html
