如何防止 CSS 中意外隱藏內容：「:focus」問題的解決方案

使用CSS 隱藏/顯示內容清單：解決意外行為

為了尋求僅使用CSS 隱藏和顯示內容的解決方案，開發人員遇到了一個問題：可以透過點擊頁面上的任意位置來隱藏內容，而不僅僅是點擊指定的「隱藏」連結。

開發人員的初始程式碼使用了以下 CSS：

<code class="css">#cont {display: none; }
.show:focus + .hide {display: inline; }
.show:focus + .hide + #cont {display: block;}</code>

當點擊「隱藏」連結時，此程式碼成功隱藏內容。但是，它還可以透過點擊頁面的任何部分來隱藏，因為 CSS 規則針對的是「:focus」偽類。

要解決此問題，我們可以使用以下更新的CSS：

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}</code>

在此更新的程式碼中，我們使用「~」組合符來定位焦點元素的同級元素。這表示「隱藏」元素 (~ .alert) 僅在「顯示」元素處於焦點時隱藏。

HTML 保持不變：

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

經過此修改方法，現在只有當單擊“隱藏我”元素時才會隱藏內容，正如開發人員所希望的那樣。

以上是如何防止 CSS 中意外隱藏內容：「:focus」問題的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！