CSS - 盒模型 - 隱藏方式
阿新 • • 發佈：2018-11-11
方式一、背景顏色透明，盒子存在，內容或子級標籤照舊顯示（不推薦）
.d1 {background-color: transparent;}
方式二、使用盒子透明度，完全透明，儲存盒子區域佔位。
.d2 { background-color: orange; /*以盒子透明度隱藏:0~1*/ opacity: 0; }
方式三、display，隱藏盒子的顯示，盒子的區域佔位也隱藏。
.d3 { background-color: cyan; /*盒子從文件中移除,盒子的區域佔位消失*/ /*當盒子重新獲得顯示方式,該盒子依舊從消失位置顯示*/ display: none; }顯示方式：使用滑鼠懸浮（hover）
/*需求:通過懸浮body讓d3重新顯示*/ /*1.明確控制的物件 2.確定對該物件的修飾 3.找出修飾與物件的關係*/ /*當滑鼠位於d1範圍內，d3顯示*/ .d1:hover ~ .d3 {display: block;}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隱藏</title> <style type="text/css"> /*盒子間會相互影響*/ div { width: 100px; height: 100px; } .d1 { background-color: red; /*以背景顏色透明度隱藏,不需要掌握*/ /*盒子還在,內容或子級標籤均會被顯示*/ background-color: transparent; } .d2 { background-color: orange; /*以盒子透明度隱藏:0~1*/ /*盒子真正意思上透明,但盒子區域佔位還在*/ opacity: 0; } .d3 { background-color: cyan; /*盒子從文件中移除,盒子的區域佔位消失*/ /*當盒子重新獲得顯示方式,該盒子依舊從消失位置顯示*/ display: none; } .d4 { background-color: yellow; } /*需求:通過懸浮body讓d3重新顯示*/ /*1.明確控制的物件 2.確定對該物件的修飾 3.找出修飾與物件的關係*/ /*body:hover .d3*/ .d1:hover ~ .d3 { display: block; } </style> </head> <body> <div class="d1">內容1</div> <div class="d2">內容2</div> <div class="d3">內容3</div> <div class="d4">內容4</div> </body> </html>
