使用CSS中的Hover控制顯示子元素或者兄弟元素
阿新 • • 發佈：2022-04-19
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>