利用CSS控制元素的顯示與隱藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .father_div {} .child_div { width: 50px; height: 50px; background-color: yellow; display: none; } .father_div:hover .child_div { display: block; } </style> <style> .second_div { width: 50px; height: 50px; background-color: yellowgreen; display: none; } .first_div:hover+.second_div { display: block; } </style> <style> .second2_div { width: 50px; height: 50px; background-color: yellowgreen; display: none; } .first2_div:hover+div+div+.second2_div { display: block; } </style> </head> <body> <div class="father_div">子元素的顯示隱藏(鼠標移動至子元素div不消失) <div class="child_div"></div> </div> <p></p> <div> <div class="first_div">相鄰的下一個兄弟元素的顯示隱藏</div> <div class="second_div"></div> </div> <p></p> <div> <div class="first2_div">不相鄰的兄弟元素的顯示隱藏(2)</div> <div></div> <div></div> <div class="second2_div"></div> </div> </body> </html>
控制元素顯示隱藏，且不消失，可以使用父元素選擇器：hover 子元素選擇器（需要顯示隱藏的元素）
控制兄弟元素的隱藏展示，用+選擇器就可以,+號只能選擇相鄰的兄弟元素，需要選擇所有的兄弟元素用~兄弟元素選擇器