如何用HTML5實現鼠標經過時改變圖片顏色?
我們在瀏覽網頁時，當鼠標劃過某一物體，就會發現，圖片和文字與原圖變了樣，這是為什么？那是因為我們為CSS樣式加了偽類：如（當鼠標經過時，背景顏色改為紅色，字體變為白色等，常見偽類主要有：<br/>link:用在為訪問的連接上。<br/>visited:用在已經訪問過的連接上。<br/>hover:用于鼠標光標置于其上的連接。<br/>active:用于獲得焦點(比如，被點擊)的連接<br/>下面就讓我們一起動手制作一個光標經過點時圖片和文字改變的偽類吧！
操作方法
-
01
先在<body>里面插入五個<div>標簽，類名class為nav,在<div>標簽里輸入自已想要的內容：
-
02
運行程序，結果如圖
-
03
采用內部樣式鏈入CSS，所有樣式的內容居中，代碼如圖
-
04
運行程序，結果如圖
-
05
為類.nav設置邊框、背景、內邊距、傾斜度（-20），代碼如圖
-
06
運行程序，結果如圖
-
07
校對<div>標簽里面的文字，字體顏色為黃色如圖
-
08
運行程序，結果如圖
-
09
為類nav設置偽類（hover）:鼠標經過是背景顏色變為藍色，字體變為白色，代碼如圖
-
10
運行程序，結果如圖
- End
- 發表于 2017-10-24 00:00
- 閱讀 ( 1807 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章