如何仅使用CSS隐藏/显示内容并防止意外隐藏？

仅使用 CSS 隐藏/显示内容列表

问题：

如何隐藏/ 仅使用 CSS 而不使用 JavaScript 显示内容，同时确保仅通过单击“隐藏”按钮而不是单击页面上的任何位置来隐藏内容。

初始解决方案：

提供的 HTML 和 CSS 代码允许隐藏和显示内容，但可以通过单击页面上的任意位置来隐藏内容。

解决方案：

到解决此问题，请使用以下修改后的 CSS：

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

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

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

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

并相应地更新 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 中的 ~（同级）选择器来定位焦点元素的同级元素。当“Hide Me”按钮获得焦点时，它会将相邻的 .alert 元素设置为 display: none;，隐藏内容。相反，当“Show Me”按钮获得焦点时，它会将相邻的 .alert 元素设置为 display: block;，显示内容。

以上是如何仅使用CSS隐藏/显示内容并防止意外隐藏？的详细内容。更多信息请关注PHP中文网其他相关文章！