本文介绍如何利用现代 CSS 的 :has() 伪类配合 :focus，在不依赖 JavaScript 的前提下，实现“点击按钮显示内容框，点击页面任意其他位置自动隐藏”的纯 CSS 交互效果。

本文介绍如何利用现代 css 的 `:has()` 伪类配合 `:focus`，在不依赖 javascript 的前提下，实现“点击按钮显示内容框，点击页面任意其他位置自动隐藏”的纯 css 交互效果。

在传统 CSS 中，:focus 只能影响自身或其后代元素，无法向上或跨兄弟节点控制其他元素——这正是原问题中 .more:focus ~ .contentbox2 失效的根本原因：.contentbox2 并非 .more 的后续兄弟（它位于 .morebuttonbox 外部），且 .more 是 @#@#@#@#@#@#@#@#@#@0）以确保原生可聚焦性与语义正确性；若必须用链接，请添加 tabindex="0" 并阻止默认跳转（但推荐优先使用 ）；

.contentbox2 必须紧跟在 .morebuttonbox 同级之后（不能嵌套在其中，也不能前置），否则 ~ 选择器无法匹配；

点击空白处失焦的原理是：浏览器默认会在点击非可聚焦元素时移除当前焦点，从而自然触发动画隐藏——无需额外监听事件。

? 进阶提示： 如需增强用户体验，可为 .contentbox2 添加 pointer-events: auto（默认已有），并确保其内部元素可交互；若需点击内容框内部时不关闭，可结合 :focus-within 进一步优化逻辑（例如：.morebuttonbox:has(.more:focus), .contentbox2:focus-within { opacity: 1; }）。

CSS工具箱(专业版)

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

下载

至此，你已掌握一种简洁、声明式、无 JS 的弹出式交互实现方式——语义清晰、维护成本低，且完全符合现代 CSS 设计哲学。

<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>

.morebuttonbox:has(.more:focus) ~ .contentbox2 {
  opacity: 1;
  z-index: 10;
  transition: opacity 0.2s ease, z-index 0.2s ease;
}

.contentbox2 {
  /* 原有样式保持不变 */
  opacity: 0;
  z-index: 1;
  /* 建议添加过渡动画提升体验 */
  transition: opacity 0.2s ease;
}

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！