實(shí)際開發(fā)中，經(jīng)常需要使用不同方式控制前端頁面中的顯示和隱藏。而CSS是實(shí)現(xiàn)這種效果的重要工具之一，特別是純CSS技術(shù)。下面，本文將介紹如何利用純CSS來實(shí)現(xiàn)顯示和隱藏元素的效果。

/* 隱藏元素 */
.hide {
display: none;
}
/* 顯示元素 */
.show {
display: block; /* 默認(rèn)改變display屬性值為block */
}
/* 鼠標(biāo)懸停時(shí)顯示元素 */
.show:hover {
display: block;
}
/* 點(diǎn)擊切換顯示、隱藏元素 */
.hide-trigger:checked + .hide-content {
display: none;
}
.show-trigger:checked + .show-content {
display: block;
}
.hide-trigger,
.show-trigger {
position: absolute;
left: -9999px;
}
.hide-content,
.show-content {
position: relative;
}
.hide-label,
.show-label {
cursor: pointer;
}

以上CSS代碼共包含三種控制顯示隱藏的效果：

1. display屬性：利用CSS中的display屬性可以控制元素的顯示和隱藏。只需要將需要隱藏的元素的display屬性值設(shè)為none即可。如果需要顯示隱藏的元素，只需要在適當(dāng)時(shí)候?qū)isplay屬性值設(shè)為其默認(rèn)值即可。

2. 鼠標(biāo)懸停時(shí)顯示元素：使用:hover偽類選擇器即可實(shí)現(xiàn)當(dāng)用戶鼠標(biāo)懸停在指定元素上時(shí)，該元素才會被顯示。

3. 點(diǎn)擊切換顯示、隱藏元素：通過checkbox或者radio實(shí)現(xiàn)。首先，將需要隱藏的元素用label包裹起來，并設(shè)置一個(gè)隨意命名的for屬性值。接著，創(chuàng)建一個(gè)與該元素for屬性值相同并在該label后的input元素，并將其type屬性值設(shè)置為checkbox或radio。然后，為了讓input元素完全消失，可以將其left屬性值設(shè)置為-9999px。最后，利用CSS中的:checked偽類選擇器來實(shí)現(xiàn)點(diǎn)擊切換顯示和隱藏的效果。