如何使用:focus实现点击按钮显示指定div并点击别处隐藏？

核心问题 #

你的CSS规则.more:focus ~ .contentbox2完全不生效，因为.more元素嵌套在.morebuttonbox内部，和.contentbox2不属于同一父级的兄弟元素——而~兄弟选择器只能匹配同一父级下的后续同级元素。

下面给三种可行的解决方案：

方案1：调整DOM结构，让元素成为同级兄弟 #

把.more从嵌套结构中移出，和.contentbox2放在同一层级，同时修改a标签的href避免页面跳转：

<div class="morebuttonbox">
  <div class="morebutton">
  </div>
</div>
<!-- 将a标签移至外部，与contentbox2同级 -->
<a href="javascript:void(0)" class="more">more</a>
<div class="contentbox2">
  <div class="byi">
    <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right: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;padding-left:5px;padding-right: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保留原有规则即可，.more:focus ~ .contentbox2会正常触发显示效果。

方案2：用:focus-within选择器（无需修改DOM） #

:focus-within会匹配包含焦点元素的父容器，不用调整HTML结构，直接替换原有CSS规则：

/* 替换原来的.more:focus ~ .contentbox2 */
.morebuttonbox:focus-within ~ .contentbox2 {
  opacity: 1;
  z-index: 10;
}

/* 可选：给父容器添加tabindex，确保焦点状态能被正确触发 */
.morebuttonbox {
  /* 原有样式保留 */
  tabindex: 0;
}

当点击内部的.more时，父容器.morebuttonbox会触发:focus-within状态，从而控制后续的.contentbox2显示。

方案3：JavaScript实现点击显示+外部点击隐藏 #

如果需要点击页面任意区域都能隐藏弹窗，纯CSS会有局限，添加JS代码实现完整逻辑：

<div class="morebuttonbox">
  <div class="morebutton">
    <a href="javascript:void(0)" class="more">
      more
    </a>
  </div>
</div>

<div class="contentbox2">
  <div class="byi">
    <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right: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;padding-left:5px;padding-right: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>

<script>
const moreBtn = document.querySelector('.more');
const contentBox = document.querySelector('.contentbox2');

// 点击按钮切换显示状态
moreBtn.addEventListener('click', (e) => {
  e.preventDefault();
  const isVisible = contentBox.style.opacity === '1';
  contentBox.style.opacity = isVisible ? '0' : '1';
  contentBox.style.zIndex = isVisible ? '1' : '10';
});

// 点击页面非按钮/弹窗区域时隐藏
document.addEventListener('click', (e) => {
  if (!moreBtn.contains(e.target) && !contentBox.contains(e.target)) {
    contentBox.style.opacity = '0';
    contentBox.style.zIndex = '1';
  }
});
</script>

CSS部分保留原有样式即可，无需再写:focus相关规则。

内容的提问来源于stack exchange，提问作者hallodu