纯CSS实现按钮悬停展开子菜单：触发区域异常问题

核心问题在于：隐藏的.btn-color元素依然占据空间且能响应鼠标事件，导致鼠标移到其位置时触发容器的hover状态。以下是修复方案：

修改后的CSS代码 #

.btn-color-selector {
  display: flex;
  gap: 10px;
}

.btn-trigger,
.btn-color {
  font-size: 30px;
  width: 40px;
  height: 40px;
  background-color: dodgerblue;
}

.btn-color {
  background-color: coral;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 300ms ease, transform 300ms ease, visibility 0ms linear 300ms;
  pointer-events: none; /* 初始禁用鼠标事件，避免隐藏时触发hover */
}

/* 仅当主按钮悬停，或容器内已展开的子按钮被悬停时，显示子按钮 */
.btn-trigger:hover ~ .btn-color,
.btn-color-selector:hover .btn-color {
  visibility: visible;
  opacity: 1;
  transform: translateX(0px);
  transition: opacity 300ms ease, transform 300ms ease, visibility 0ms linear 0ms;
  pointer-events: auto; /* 展开后恢复鼠标事件，允许选择子按钮 */
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}

关键改动说明 #

• pointer-events: none：给初始状态的.btn-color添加该属性，让隐藏的子按钮完全不响应鼠标事件，避免鼠标移到其位置时触发容器hover。
• 调整hover触发条件：
  • .btn-trigger:hover ~ .btn-color：仅当主按钮被悬停时，触发其所有兄弟子按钮展开。
  • .btn-color-selector:hover .btn-color：当鼠标移到已展开的子按钮上时，容器处于hover状态，保持子按钮显示，避免切换时的闪烁问题。
• 展开后恢复pointer-events: auto：让子按钮可以正常被选择和交互。

对应的HTML代码 #

<div class="container">
  <div class="btn-color-selector">
    <div class="btn-trigger"></div>
    <div class="btn-color"></div>
    <div class="btn-color"></div>
    <div class="btn-color"></div>
    <div class="btn-color"></div>
  </div>
</div>

修改后，只有当鼠标悬停在主按钮上时才会展开子按钮，展开后鼠标移到子按钮上能保持显示，同时主按钮右侧的隐藏区域不会触发展开。

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