点击子元素时如何保持父div的:hover CSS样式持续生效

现有规则不生效、点击按钮后容器消失的核心原因有两个：

• 你使用的<span>、<i>属于非交互元素，默认不具备聚焦能力，点击时不会触发焦点状态，:focus、:focus-within伪类自然无法匹配
• 内联写在.menu-button-container上的style="visibility:hidden"优先级高于外部CSS规则，就算伪类触发也可能被内联样式覆盖
• 点击按钮弹出菜单后，鼠标移动到菜单区域会离开原父div范围，hover状态直接失效

不需要额外JS，做两处调整即可：

1. 给可点击的按钮元素添加tabindex="0"属性，让它成为可聚焦元素，参与页面焦点流，点击按钮后焦点会停留在按钮上，触发父元素的:focus-within状态
2. 把内联的隐藏样式移到样式表中，避免优先级冲突，保留:hover、:focus-within的匹配规则即可

修改后的代码参考：

HTML结构 #

<div class="menu-button-container">
  <span class="menu-button" tabindex="0">
    <i class="btn btn-menu"></i>
  </span>
  <!-- 建议将点击后弹出的关联菜单也放在这个容器内部，点击菜单项时焦点仍在容器内，容器会持续保持可见 -->
</div>

CSS样式（和你原有SCSS嵌套语法一致） #

// 这里的.parent-wrapper是你原有代码中&对应的父级节点，即你监听hover状态的外层元素
.parent-wrapper {
  // 默认隐藏按钮容器，替代原来的内联样式
  .menu-button-container {
    visibility: hidden;
  }
  // 悬停、或容器内有元素聚焦时显示按钮容器
  &:hover,
  &:focus-within {
    .menu-button-container {
      visibility: visible;
    }
  }
}

补充说明：tabindex="0"不会破坏页面默认的Tab导航顺序，用户用键盘导航时也能正常聚焦到按钮，符合可访问性要求。

如果不想让按钮被Tab键聚焦，可以用CSS复选框hack实现，完全不需要JS：

1. 在容器内加一个隐藏的<input type="checkbox">，用<label>关联按钮，点击按钮时会自动切换复选框的选中状态
2. 用:checked伪类控制容器显示
   代码示例：

<div class="parent-wrapper">
  <div class="menu-button-container">
    <input type="checkbox" id="menuToggle" class="menu-toggle">
    <label for="menuToggle" class="menu-button">
      <i class="btn btn-menu"></i>
    </label>
    <!-- 弹出菜单放在容器内部即可 -->
  </div>
</div>

.parent-wrapper {
  .menu-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .menu-button-container {
    visibility: hidden;
  }
  &:hover,
  .menu-toggle:checked ~ .menu-button-container {
    visibility: visible;
  }
}

这个方案的好处是点击按钮后容器会保持显示，直到你手动取消复选框选中状态，缺点是需要额外添加DOM结构。

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