CSS中有一個非常常用的屬性叫做display,它可以控制HTML元素在頁面中的顯示方式,其中一個取值就是none,即隱藏元素。
div { display: none; }
以上代碼就可以讓div元素在頁面中不顯示。但有時候我們需要在一些特定情況下讓元素顯示出來,比如鼠標hover時或者點擊某個按鈕時。
這時候我們可以利用CSS中的偽類選擇器或者JavaScript來控制元素顯示與隱藏。
/* 鼠標hover時顯示div元素 */ div:hover { display: block; } /* 點擊按鈕時顯示div元素 */ button.onclick = function() { document.getElementById("myDiv").style.display = "block"; }
以上代碼中,第一個示例利用:hover偽類選擇器來控制元素顯示,當鼠標移動到div元素上方時,它就會顯示出來。第二個示例則是通過JavaScript來控制元素顯示,當我們點擊一個按鈕時,會觸發button.onclick事件,然后讓id="myDiv"的元素display屬性的取值變成block,這樣div元素就顯示出來了。
總之,在CSS中讓元素隱藏只需要把display屬性設置成none即可,而具體的顯示操作可以通過JavaScript或者CSS中的偽類選擇器來實現。
上一篇css如何使列表橫向
下一篇ajax在html里調用