摘要：
一，下拉框靠近子元素1˂!
一，下拉框靠近子元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 *{ 9 margin:0; 10 padding:0; 11 } 12 13 .a{ 14 height:300px; 15 width:300px; 16 background-color:#bfa; 17 } 18 19 .b{ 20 height:100px; 21 width:100px; 22 background-color:red; 23 } 24 25 /*设置下拉框 */ 26 .c{ 27 height:400px; 28 width:400px; 29 background-color:blue; 30 opacity:.2; 31 position:absolute; 32 top:100px; 33 display:none; 34 } 35 36 /*设置移入效果 */ 37 .b:hover~ .c{ 38 display:block; 39 } 40 41 .a .c:hover{ 42 display:block; 43 } 44 45 </style> 46 47 </head> 48 <body> 49 50 <div class="a"> 51 <div class="b"></div> 52 <div class="c"></div> 53 </div> 54 </body> 55 </html>
内容
1.下拉框和子元素贴边靠近，当鼠标移动到子元素，下拉框会出来，然后鼠标移动到下拉框，下拉框就消失了，此时，下拉框也设置hover,鼠标移动到下拉框就会显示出来
二，下拉框靠近父元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 *{ 9 margin:0; 10 padding:0; 11 } 12 13 .a{ 14 height:300px; 15 width:300px; 16 background-color:#bfa; 17 } 18 19 .b{ 20 height:100px; 21 width:100px; 22 background-color:red; 23 } 24 25 /*设置下拉框 */ 26 .c{ 27 height:400px; 28 width:400px; 29 background-color:blue; 30 opacity:.2; 31 position:absolute; 32 top:300px; 33 display:none; 34 } 35 36 /*设置移入效果 */ 37 .a:hover .c{ 38 display:block; 39 } 40 41 /*.a .c:hover{ 42 display: block; 43 } */ 44 45 </style> 46 47 </head> 48 <body> 49 50 <div class="a"> 51 <div class="b"></div> 52 <div class="c"></div> 53 </div> 54 </body> 55 </html>
内容
1. 当父元素和子元素贴边靠近时，鼠标移动到父元素和下拉框时，下拉框都会显示，下拉框在父元素中