如何防止 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中文网其他相关文章！