如何实现鼠标移出元素后在指定范围内保持hover激活状态（导航菜单场景）

• 当前#navCont的实际可交互边界，完全由内部唯一不脱离文档流的中心图标#sqlogo决定。所有侧边按钮用了position: absolute定位，完全不参与父容器的尺寸计算，撑不起父容器的交互范围。
• 光标从中心图标移到侧边按钮时，已经超出#navCont的实际物理边界，#navCont:hover触发失效，连带绑定的按钮显示逻辑中断，所有按钮瞬间消失。
• 之前尝试给#navCont加padding的方案，是靠撑大父容器盒模型扩大交互范围，但padding属于文档流占位，会直接推挤相邻元素，自然会出现顶起上方标题的问题，完全不符合需求。
• 之前在图标前方放更大尺寸元素的方案，错在元素层级高于按钮本身，当光标移到按钮位置时，实际触发的是前置遮罩元素的hover，按钮自身的交互被拦截，连带原有链式hover逻辑直接断掉。

核心思路：用绝对定位的透明伪元素搭建全范围交互热区。这类元素完全脱离文档流，不管尺寸多大都不会改动原有页面布局，同时可以把光标从中心图标移到任意侧边按钮的整条移动路径，全部纳入可交互范围。
需要新增的CSS代码：

/* 新增全范围透明热区 */
#navCont::after {
  content: '';
  position: absolute;
  /* 热区完全覆盖中心图标、所有侧边按钮的分布范围 */
  top: -2em;
  bottom: -2em;
  left: -5em;
  right: -5em;
  /* 完全透明，无视觉遮挡 */
  opacity: 0;
  /* 压到最底层，不拦截原有元素的hover交互 */
  z-index: -1;
}

方案的实际效果：

• 热区完全不占用文档流空间，不管覆盖范围多大，都不会推挤、顶起页面上的其他内容，解决之前加padding带来的布局错位问题
• 整个热区都归属在#navCont的定位范围内，只要光标在中心图标、任意侧边按钮、以及两者之间的空白路径上，就不会中断#navCont:hover状态，按钮不会突然消失
• 热区层级低于所有可交互元素，移到按钮上时，按钮自身的半透明切全亮的hover效果可以正常触发，不会被热区拦截交互
• 原本实现的中心图标脉冲动画、hover暂停逻辑完全不需要改动，不会和热区产生冲突
• 矩形热区完全覆盖所有按钮的分布范围，满足“同等覆盖范围的矩形可交互热区也可接受”的需求

原代码的body样式只写了flex-direction: column，没有补display: flex，如果需要全页垂直水平居中的布局效果，可以补上这行属性，不影响导航的交互逻辑。

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