如何让CSS:hover效果在鼠标悬停于子元素时保持生效？

问题1：下拉菜单展开时按钮无法保持橙色状态 #

原代码仅给.dropbtn绑定:hover事件，导致鼠标移至下拉菜单时按钮失去激活样式。解决思路是将:hover绑定到按钮的父容器.dropdown上，只要鼠标在父容器范围内（包括下拉菜单），按钮就保持橙色：

/* 替换原按钮hover样式 */
.dropdown:hover .dropbtn {
  background-color: orange;
  /* 保留你原来的形状变化样式，比如border-radius、padding等 */
}

/* 同时调整下拉菜单的触发逻辑 */
.dropdown:hover .dropdown-content {
  display: block;
}

问题2：从Dropdown移至Menu3时下拉菜单无法消失 #

这个bug是因为鼠标移动路径触发了相邻元素的hover干扰，或者下拉菜单与Menu3的布局重叠导致hover状态未正确切换。可以通过两种方式解决：

方式1：增加下拉菜单与父元素的间距 #

给下拉菜单设置margin-top，确保鼠标从Dropdown到Menu3时不会误触父容器的hover：

.dropdown-content {
  margin-top: 4px; /* 根据你的导航栏高度调整合适值 */
}

方式2：添加消失延迟避免误触 #

用opacity和visibility替代display控制菜单显示，配合延迟过渡，给鼠标移动留出缓冲时间：

/* 替换原下拉菜单的display控制 */
.dropdown-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
}

/* 设置延迟消失 */
.dropdown:not(:hover) .dropdown-content {
  transition-delay: 0.2s;
}

关键逻辑说明 #

通过父容器的:hover状态统一控制按钮和下拉菜单的样式，避免子元素hover状态的割裂；调整布局或添加过渡延迟，解决相邻元素的hover干扰问题，无需依赖JavaScript即可实现纯CSS的预期交互。

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