一、什么是伪类
伪类用于定义元素的特殊状态。
例如，它可以用于：
-
设置鼠标悬停在元素上时的样式
-
为已访问和未访问链接设置不同的样式
-
设置元素获得焦点时的样式
二、hover
以下面代码为例，hover是鼠标悬停在元素上样式的改变，它不仅仅改变的是盒子的颜色，也可以改变盒子的宽高、边框等等等等。
活学活用，联想到网页上一些页面，当鼠标放上去会有一些div盒子弹出来，这就可以用hover实现，比如div4，将他的display属性设置为none，这样盒子就会消失，当鼠标悬停在指定位置之后，会把属性改为display: block; 这样就实现了盒子弹射出来。
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>
三、与hover用法相同的伪类还有很多，如下图所示