CSS點擊顯示隱藏卡片

/* 首先定義隱藏的卡片 */
.card-hidden {
display: none;
}
/* 當點擊顯示按鈕時，顯示卡片 */
.show-card:focus + .card-hidden {
display: flex;
}

經常會遇到需要點擊才能顯示或隱藏某些內容的頁面設計。這種操作往往需要使用JavaScript實現，但實際上使用CSS也可以輕松實現這種效果。

在這個示例中，我們將展示如何使用CSS點擊顯示隱藏卡片。首先，我們創建一個隱藏卡片，并將其定義為不可見狀態。這可以通過下面的代碼完成：

.card-hidden {
display: none;
}

現在，我們需要創建一個顯示卡片的按鈕，并且當用戶點擊該按鈕時，我們需要顯示該卡片。然而，我們無法實現點擊事件的監聽，因為我們在使用CSS，不過我們可以利用:focus偽類，當用戶點擊該按鈕時，該按鈕被聚焦，并且我們可以在:focus狀態下選擇隱藏卡片并將其顯示。下面是代碼：

.show-card:focus + .card-hidden {
display: flex;
}

在上面的代碼中，我們選擇.show-card:focus狀態下的相鄰元素.card-hidden，并將其顯示。

現在，我們可以將這兩個元素放在一起，就可以實現點擊顯示隱藏卡片的效果。下面是完整的例子：

<button class="show-card">顯示卡片</button>
<div class="card-hidden">
<p>這是隱藏的卡片內容</p>
</div>