如何僅使用CSS隱藏/顯示內容並防止意外隱藏？

僅使用CSS 隱藏/顯示內容清單

問題：

問題：

如何隱藏/僅使用CSS 而不使用JavaScript 顯示內容，同時確保僅透過點擊「隱藏」按鈕而不是按一下頁面上的任何位置來隱藏內容。

初始解決方案：

提供的 HTML 和 CSS 程式碼允許隱藏和顯示內容，但可以透過點擊頁面上的任何位置來隱藏內容。

解決方案：

<code class="css">body {
  display: block;
}

.span3:focus ~ .alert {
  display: none;
}

.span2:focus ~ .alert {
  display: block;
}

.alert {
  display: none;
}</code>

到解決此問題，請使用以下修改後的CSS：

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

並相應地更新HTML 結構：

工作原理：此解決方案使用CSS 中的~（同級）選擇器來定位焦點元素的同級元素。當「Hide Me」按鈕獲得焦點時，它會將相鄰的 .alert 元素設為 display: none;，隱藏內容。相反，當「Show Me」按鈕獲得焦點時，它會將相鄰的 .alert 元素設為 display: block;，顯示內容。

以上是如何僅使用CSS隱藏/顯示內容並防止意外隱藏？的詳細內容。更多資訊請關注PHP中文網其他相關文章！