首頁  >  文章  >  web前端  >  如何僅使用CSS隱藏/顯示內容並防止意外隱藏?

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

Patricia Arquette
Patricia Arquette原創
2024-10-30 01:50:29580瀏覽

How to Hide/Show Content with CSS Only and Prevent Accidental Hiding?

僅使用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn