纯HTML/CSS实现点击展开功能时隐藏列表仍可点击问题求助

问题根因 #

你目前仅通过opacity: 0控制列表容器的隐藏效果，opacity属性仅调整元素可见性，不会阻止元素响应鼠标交互，所以透明状态下的列表区域仍然可以被点击，触发按钮激活效果。

修复方案 #

只需要通过pointer-events属性控制元素的交互权限，同时修正原有CSS中写反层级的无效选择器即可：

1. 给默认隐藏状态的列表容器添加pointer-events: none，禁止所有鼠标交互
2. 给激活显示状态的列表容器添加pointer-events: auto，恢复正常交互权限
3. 移除激活态选择器中错误的.centered-y前缀（.centered-y是列表容器的子元素，无法作为父元素激活态的选择前缀）

修改后的CSS片段

/* 默认隐藏状态的列表容器 */
.distribution-map .map-point .content {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  width: 100%;
  height: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  overflow: overlay;
  /* 新增：默认禁止鼠标交互 */
  pointer-events: none;
}

/* 按钮激活状态的列表容器 */
.distribution-map .map-point:active .content ,
.distribution-map .map-point:focus .content {
  opacity: 1;
  transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  overflow: hidden;
  /* 新增：激活状态恢复鼠标交互 */
  pointer-events: auto;
}

修改完成后，仅当按钮激活、列表弹框可见时，列表才会响应点击操作，未激活状态下点击列表区域不会有任何效果。

内容的提问来源于stack exchange，提问作者W.Diaz