WEB前端初學者筆記（8）--偽類選擇器
阿新 • • 發佈：2021-11-10
一、什麼是偽類
偽類用於定義元素的特殊狀態。
例如，它可以用於：
-
設定滑鼠懸停在元素上時的樣式
-
為已訪問和未訪問連結設定不同的樣式
-
二、hover
以下面程式碼為例，hover是滑鼠懸停在元素上樣式的改變，它不僅僅改變的是盒子的顏色，也可以改變盒子的寬高、邊框等等等等。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 #div1{ 11 width: 300px; 12 height: 300px; 13 background: red; 14 } 15 #div1:hover{ 16 background: black; 17 } 18 #div2{ 19 width: 100px;20 height: 100px; 21 background: green; 22 } 23 #div1:hover>#div2{ 24 background: pink; 25 } 26 #div3{ 27 width: 50px; 28 height: 50px; 29 background: yellow; 30 } 31 #div1:hover #div3{ 32 background: blue; 33 } 34 #div4{ 35 width: 200px; 36 height: 200px; 37 background: gray; 38 display: none; 39 } 40 #div1:hover+#div4 { 41 background: lightgreen; 42 width: 150px; 43 height: 600px; 44 display: block; 45 } 46 /*這個加號 必須緊挨著的弟弟元素，中間有其他元素或者哥哥元素都會失效*/ 47 48 49 50 </style> 51 </head> 52 <body> 53 <div id="div1"> 54 <div id="div2"> 55 <div id="div3"> 56 57 </div> 58 </div> 59 </div> 60 61 <div id="div4"></div> 62 </body> 63 </html>
以下面的例子展示hover如何實現滑鼠懸停圖片後圖片樣式轉換。如網頁展示，這是一個灰色麥克風，滑鼠放上去之後會變成藍色麥克風。其實這都是一個圖片，只不過在圖片上使用了no-repeat實現不平鋪，讓多餘部分消失，然後使用hover來實現對圖片的重新定位，達到預期效果。
使用一張圖片而不是多張圖片的作用是減少載入次數。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 #camera{ 11 width: 24px; 12 height: 24px; 13 border: 1px solid; 14 margin: 100px auto 0; 15 background: url("https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-2x-6258e1cf13.png") no-repeat; 16 background-size:24px 96px; 17 } 18 #camera:hover{ 19 background-position: 0px -24px; 20 } 21 22 </style> 23 </head> 24 <body> 25 <div id="camera"></div> 26 </body> 27 </html>