div移动引发子菜单Hover闪烁问题及解决方法

我做了一个子菜单，鼠标悬停在nav元素上时显示；鼠标离开该元素后，子菜单会隐藏并向上移动。但目前遇到问题：由于子菜单紧邻nav元素下方，向上移动的过渡过程中会触发子菜单的hover状态，导致页面出现闪烁（glitch）。

相关代码 #

CSS 代码

#sub-menu {
  position: absolute;
  background-color: red;
  visibility: hidden;
  width: 13.2rem;
  right: 54%;
  top: 3.9%;
  height: 330%;
  line-height: 30px;
  border-radius: 5px;
  z-index: 600;
  opacity: 0;
  transition: 0.1s ease;
}

#nav>li:hover #sub-menu {
  visibility: visible;
  top: 7.9%;
  opacity: 1;
}

HTML 代码

<div>
  <nav>
    <ul id="nav">
      <li>
        <a>Test1</a>
        <ul id="sub-menu">
          <li><a href="">Test2</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

修复方案 #

• 方案一：禁用子菜单非激活状态的鼠标事件
  让子菜单在未被激活时不接收任何鼠标事件，彻底避免过渡过程中误触发hover。修改后的CSS：

  #sub-menu {
    position: absolute;
    background-color: red;
    visibility: hidden;
    width: 13.2rem;
    right: 54%;
    top: 3.9%;
    height: 330%;
    line-height: 30px;
    border-radius: 5px;
    z-index: 600;
    opacity: 0;
    transition: 0.1s ease;
    pointer-events: none; /* 添加这行 */
  }
  
  #nav>li:hover #sub-menu {
    visibility: visible;
    top: 7.9%;
    opacity: 1;
    pointer-events: auto; /* 添加这行 */
  }
  

• 方案二：给隐藏过渡添加延迟
  通过transition-delay让子菜单的隐藏动作延迟触发，给鼠标足够时间离开子菜单区域，避免误触发hover。修改后的CSS：

  #sub-menu {
    position: absolute;
    background-color: red;
    visibility: hidden;
    width: 13.2rem;
    right: 54%;
    top: 3.9%;
    height: 330%;
    line-height: 30px;
    border-radius: 5px;
    z-index: 600;
    opacity: 0;
    transition: top 0.1s ease, opacity 0.1s ease; /* 明确过渡属性 */
    transition-delay: 0.1s; /* 隐藏时延迟0.1秒 */
  }
  
  #nav>li:hover #sub-menu {
    visibility: visible;
    top: 7.9%;
    opacity: 1;
    transition-delay: 0s; /* 显示时立即触发 */
  }
  

• 方案三：调整子菜单初始位置，改变过渡方向
  把子菜单的初始top值设得比激活状态更高，让子菜单从上方滑入而不是下方，避免过渡路径覆盖父元素的hover区域。修改后的CSS：

  #sub-menu {
    position: absolute;
    background-color: red;
    visibility: hidden;
    width: 13.2rem;
    right: 54%;
    top: 10%; /* 改为比7.9%更高的值 */
    height: 330%;
    line-height: 30px;
    border-radius: 5px;
    z-index: 600;
    opacity: 0;
    transition: 0.1s ease;
  }
  
  #nav>li:hover #sub-menu {
    visibility: visible;
    top: 7.9%;
    opacity: 1;
  }
  

内容的提问来源于stack exchange，提问作者Thor The dog