使用 CSS :has() 伪类实现按钮聚焦显示隐藏内容-html教程-PHP中文网

使用 CSS :has() 伪类实现按钮聚焦显示隐藏内容

本文介绍如何利用现代 CSS 的 :has() 伪类，配合 :focus 实现“点击按钮显示面板、点击页面任意处自动隐藏”的纯 CSS 交互效果，无需 JavaScript。

本文介绍如何利用现代 css 的 `:has()` 伪类，配合 `:focus` 实现“点击按钮显示面板、点击页面任意处自动隐藏”的纯 css 交互效果，无需 javascript。

在传统 CSS 中，:focus 只能影响自身或后续兄弟元素（通过 + 或 ~），但无法“向上”选择父容器或跨层级控制非直接后代元素。你原代码中 .more:focus ~ .contentbox2 失效的根本原因在于：.contentbox2 并非 .more 的兄弟元素——它位于 .morebuttonbox 外部，而 .more 深嵌在 .morebuttonbox > .morebutton > a 内部，CSS 选择器无法反向跨越 DOM 层级。

现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）已广泛支持 :has() 伪类，它允许我们基于子元素状态“回溯”选择父级或同级容器。本方案的核心思路是：将触发逻辑上移至 .morebuttonbox 容器，并用 :has(.more:focus) 判断其内部按钮是否获得焦点，再通过相邻兄弟选择器 ~ 控制 .contentbox2 的显隐。

以下是完整可运行的实现方案：

<div class="morebuttonbox">
  <div class="morebutton">
    <button class="more">more</button>
  </div>
</div>

<div class="contentbox2">
  <div class="byi">
    <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px 5px; border-radius:3px; border:1px solid black; border-color:white #ae9cb9 #8b7c94 #7d6f85;">byi</span>
    text text text text text text text text text text text text text ...
    <div class="dni">
      <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px 5px; border-radius:3px; border:1px solid black; border-color:white #ae9cb9 #8b7c94 #7d6f85;">dni</span>
      text text text text text text text text text text text text text ...
    </div>
  </div>
</div>

对应关键 CSS：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

/* 保持原有样式不变 */
.morebuttonbox {
  height: 60px;
  width: 70px;
  background-image: repeating-linear-gradient(0deg, #ecd0ff, #ecd0ff 1px, transparent 0, transparent 50%);
  background-size: 8px 8px;
  background-color: #fcf8f8;
  position: absolute;
  margin-top: 260px;
  border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
}

.morebutton {
  font-size: 14px;
  background: #e0e0e0;
  padding: 2px;
  width: 50px;
  text-align: center;
  margin: auto;
  margin-top: 16px;
  border: 1px ridge black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
}

.contentbox2 {
  background: white;
  height: 130px;
  width: 301px;
  border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
  position: absolute;
  margin-top: 190px;
  margin-left: 69px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease, z-index 0.2s;
}

.byi, .dni {
  width: 270px;
  height: 50px;
  word-break: break-word;
  margin-left: 15px;
}

.byi { margin-top: 10px; }
.dni { margin-top: 20px; }

/* ✅ 关键：利用 :has() 回溯容器，再控制兄弟元素 */
.morebuttonbox:has(.more:focus) ~ .contentbox2 {
  opacity: 1;
  z-index: 10;
}

⚠️ 重要注意事项：

必须使用（而非 @#@#@#@#@#@#@#@#@#@0），因为在部分浏览器中默认不支持 :focus（尤其无 tabindex 时），而原生可聚焦且语义正确；
.contentbox2 必须与 .morebuttonbox 处于同一 DOM 层级，且在其后（满足 ~ 相邻兄弟选择器条件）；
添加 transition 可使显示/隐藏更平滑；
点击页面空白处时，.more 自动失焦 → :has(.more:focus) 不再匹配 → .contentbox2 隐去，完全符合“点击消失”需求；
若需兼容旧版浏览器（如 IE 或早期 Chrome/Firefox），必须降级为 JavaScript 方案（监听 click + blur 事件）。