CSS鼠標(biāo)點(diǎn)擊顯示是一種常見的網(wǎng)頁交互效果。通過CSS技術(shù)可以實(shí)現(xiàn)當(dāng)鼠標(biāo)點(diǎn)擊某一個(gè)元素時(shí)，顯示或隱藏另一個(gè)元素的效果。這種效果一般常用于網(wǎng)站的導(dǎo)航菜單、彈出框、下拉框等頁面元素的交互效果。

在HTML中，可以使用標(biāo)簽來作為鼠標(biāo)點(diǎn)擊的觸發(fā)事件。在CSS中，則可以通過:hover來實(shí)現(xiàn)鼠標(biāo)懸停的效果，通過:focus來實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊的效果。在這里介紹一下其中的:focus效果。

.show-content {
display: none;
}
.click:hover + .show-content {
display: block;
}
.click:focus + .show-content {
display: block;
}

上面的代碼表示了一個(gè)點(diǎn)擊顯示的效果，當(dāng)我們點(diǎn)擊class為click的元素時(shí)，就可以顯示class為show-content的元素。

其中，.show-content的display為none，表示一開始是不顯示元素的。而.click:hover + .show-content表示當(dāng)我們鼠標(biāo)懸浮在.click上時(shí)，.show-content元素會(huì)顯示出來。.click:focus + .show-content表示當(dāng)我們點(diǎn)擊.click元素時(shí)，.show-content元素會(huì)顯示出來。

這種效果可以應(yīng)用于很多不同的場(chǎng)景，比如實(shí)現(xiàn)下拉列表、彈出框、輪播圖等等效果。只需要在HTML中添加對(duì)應(yīng)的元素和CSS的樣式即可實(shí)現(xiàn)。