很多時(shí)候我們需要在一個(gè)網(wǎng)頁中對部分內(nèi)容進(jìn)行鼠標(biāo)的操作來進(jìn)行顯示或隱藏,這時(shí)候就需要用到CSS中的一些屬性來實(shí)現(xiàn)。
首先,我們需要在HTML中創(chuàng)建一個(gè)帶有相應(yīng)class或id的
標(biāo)簽用來實(shí)現(xiàn)鼠標(biāo)操作。例如:
<div class="hidden"> <p>這是需要隱藏的內(nèi)容。</p> </div>
接著,在CSS中我們需要針對這個(gè)class或id設(shè)置以下屬性:
.hidden { display: none; }
其中,display屬性用來決定該內(nèi)容是否顯示,值為none時(shí)代表隱藏。
最后,在HTML中我們需要?jiǎng)?chuàng)建一個(gè)觸發(fā)器,當(dāng)鼠標(biāo)執(zhí)行相應(yīng)操作時(shí)可以實(shí)現(xiàn)顯示或隱藏。例如:
<button onclick="myFunction()">點(diǎn)擊顯示內(nèi)容</button>
其中,onclick屬性可以設(shè)置鼠標(biāo)點(diǎn)擊該button時(shí)執(zhí)行的函數(shù)。
接著,在JS中我們需要編寫一個(gè)函數(shù)來針對這個(gè)class或id實(shí)現(xiàn)顯示或隱藏。例如:
function myFunction() { var x = document.querySelector(".hidden"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }
其中,querySelector()用來選出指定的class或id,style.display用來獲取或改變該內(nèi)容的顯示狀態(tài),block時(shí)代表顯示。
這樣,我們就可以實(shí)現(xiàn)通過鼠標(biāo)對指定的內(nèi)容進(jìn)行顯示或隱藏的功能了。