1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>包含块的显示</title> 6 <style type="text/css"> 7 8 9 #div1{ 10 width: 100px; 11 height: 100px; 12 background-color: red; 13 position: absolute; 14 left: 100px; 15 top: 100px; 16 } 17 #div2{ 18 width: 200px; 19 height: 200px; 20 background-color: white; 21 display: none; 22 position: absolute; 23 left: 100px; 24 25 } 26 #div3{ 27 width: 400px; 28 height: 400px; 29 background-color: cyan; 30 display: none; 31 position: absolute; 32 left: 200px; 33 top: 0px; 34 } 35 #div1:hover>#div2{ 36 display: block; 37 } 38 /*包含块的显示*/ 39 #a1:hover>#div4{display: block;} 40 #a2:hover>#div5{display: block;} 41 #a3:hover>#div6{display: block;} 42 43 #a1:hover{background-color: mediumseagreen;} 44 #a2:hover{background-color: magenta;} 45 #a3:hover{background-color: cornflowerblue;} 46 47 #div4{background-color: mediumseagreen;} 48 #div5{background-color: magenta;} 49 #div6{background-color: cornflowerblue;} 50 51 table tr:hover{background-color: darkgray;} 52 table tr td{width: 200px;} 53 #div4,#div5,#div6{ 54 width: 500px; 55 height: 300px; 56 /*不显示*/ 57 display: none; 58 /*绝对定位*/ 59 position: absolute; 60 left: 198px; 61 top: 0px; 62 } 63 table div div,table,table div{ 64 border: none; 65 } 66 </style> 67 </head> 68 <body> 69 <div id="div1"> 70 <div id="div2"> 71 <table> 72 <tr><td> 73 <div id="a1"> 74 1<div id="div4"> 75 <ul> 76 <li>sajb</li> 77 <li>df</li> 78 <li>asf</li> 79 <li>sb</li> 80 <li>rh</li> 81 <li>rruuuuuu</li> 82 </ul> 83 </div> 84 </div> 85 </td></tr> 86 87 <tr><td> 88 <div id="a2"> 89 2<div id="div5"> 90 <marquee>java script</marquee> 91 </div> 92 </div> 93 </td></tr> 94 95 <tr><td> 96 <div id="a3"> 97 3<div id="div6"> 98 <img src="img/product/3.jpg" /> 99 </div> 100 </div> 101 </td></tr> 102 </table> 103 </div> 104 105 </div> 106 </body> 107 </html>
2312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
