1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 .father_div {}
11
12 .child_div {
13 width: 50px;
14 height: 50px;
15 background-color: yellow;
16 display: none;
17 }
18
19 .father_div:hover .child_div {
20 display: block;
21 }
22 </style>
23 <style>
24 .second_div {
25 width: 50px;
26 height: 50px;
27 background-color: yellowgreen;
28 display: none;
29 }
30
31 .first_div:hover+.second_div {
32 display: block;
33 }
34 </style>
35 <style>
36 .second2_div {
37 width: 50px;
38 height: 50px;
39 background-color: yellowgreen;
40 display: none;
41 }
42
43 .first2_div:hover+div+div+.second2_div {
44 display: block;
45 }
46 </style>
47 </head>
48 <body>
49 <div class="father_div">子元素的显示隐藏
50 <div class="child_div"></div>
51 </div>
52 <p></p>
53 <div>
54 <div class="first_div">相邻的下一个兄弟元素的显示隐藏</div>
55 <div class="second_div"></div>
56 </div>
57 <p></p>
58 <div>
59 <div class="first2_div">不相邻的兄弟元素的显示隐藏(2)</div>
60 <div></div>
61 <div></div>
62 <div class="second2_div"></div>
63 </div>
64 </body>
65 </html>
