NextJS中CSS hover属性不生效求助：悬停li时mega元素无法显示

问题根源 #

你的CSS选择器nav li.has-child:hover .mega不生效，核心原因是has-child类被加在了<Link>标签上，而非<li>标签上。当前DOM结构里<li>并没有has-child类，导致选择器无法匹配到目标元素。

修复方法 #

方法1：调整类的位置（推荐） #

把has-child类从<Link>移到<li>上，让CSS选择器能正确匹配：

修改后的JSX代码：

<nav className="mobile-hide">
  <ul className="flex-item second-links">
    <li className="has-child">
      <Link href="#">
        Women
        <div className="icon-small">
          <i className="ri-arrow-down-s-line"></i>
        </div>
      </Link>
      <div className="mega">
        {/* 你的mega内容 */}
      </div>
    </li>
  </ul>
</nav>

原有CSS代码保持不变即可，此时nav li.has-child:hover .mega能正确选中hover状态下<li>内部的.mega元素。

方法2：修改CSS选择器 #

如果不想调整DOM结构，可以修改CSS选择器，匹配包含has-child类<Link>的<li>元素：

修改后的CSS代码：

nav .mega {
  display: none;
  position: absolute;
  width: var(--percent100);
  height: auto;
  top: auto;
  left: 0;
  right: 0;
  padding: 2.5em;
  line-height: 2em;
  background-color: var(--light-bg-color);
  box-shadow: rgb(0 0 0 / 20%) 0 30px 20px -30px;
  z-index: 100;
}
/* 选择包含.has-child的Link的li，hover时显示mega */
nav li:has(.has-child):hover .mega {
  display: block;
}

注意：:has()选择器需要现代浏览器支持（Chrome 101+、Firefox 121+等），若需兼容旧浏览器，优先使用方法1。

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