hover基础

hover

hover 是鼠标光标移动到标签上的变化属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #div1{
 8             width: 300px;
 9             height: 300px;
10             background: red;
11         }
12         #div1:hover{/*光标移动到div1时的变化*/
13             background: #00b38a;
14         }
15         #div2{
16             width: 100px;
17             height: 100px;
18             background: green;
19         }
20         #div1:hover>#div2{/*光标移动到div1时子集div2的变化*/
21             background: #3388ff;
22         }
23 
24         #div3{
25             height: 50px;
26             width: 50px;
27             background: yellow;
28         }
29         #div1:hover #div3{
30             background: #555555;
31         }
32         #div4{
33             height: 200px;
34             width: 200px;
35             background: blue;
36         }
37         #div1:hover+#div4{
38             background: black;
39         }
40     </style>
41 </head>
42 <body>
43 <div id="div1">
44     <div id="div2">
45         <div id="div3"></div>
46     </div>
47 </div>
48 
49 <div id="div4"></div>
50 
51 </body>
52 </html>

效果图：

原图：

 

 

光标移动到上面：