如何用CSS/SCSS实现悬停侧边栏li元素显示router-outlet

场景与需求 #

现有如下HTML结构：

<nb-sidebar class="menu-sidebar">
  <nb-menu class="sidebar-menu">
     <ul class="menu-items">
        <li class="menu-item ng-tns-c140-0 ng-star-inserted" >
          <a class="ng-tns-c140-0 ng-star-inserted active" ng-reflect-router-link="/pages/dashboard"   title="Dashboard" href="/pages/dashboard">
        </li>
     </ul>
  </nb-menu>
</nb-sidebar>

<div class="content">
  <router-outlet>
    <div class="text">Message</div>
  </router-outlet>
</div>

需求：默认隐藏<router-outlet>，当鼠标悬停在侧边栏的<li>元素上时，显示该元素。

用户尝试的无效代码 #

用户编写了以下CSS但未达到预期效果：

router-outlet {
  display: none;
}

nb-sidebar li:hover + .content router-outlet {
     display: block;
}

问题原因 #

这段代码失效的核心是选择器逻辑错误：

• +是相邻兄弟选择器，仅能匹配紧接在目标元素之后的同级元素。
• 此处<li>的父级是<ul>、<nb-menu>，最终父容器是<nb-sidebar>，而.content是<nb-sidebar>的同级元素，并非<li>的同级元素。因此nb-sidebar li:hover + .content这个选择器无法匹配到任何元素，自然无法触发样式变化。

纯CSS解决方案 #

要实现需求，可借助CSS的:has()选择器——它能检测父容器内是否存在符合条件的子元素，进而控制父容器的兄弟元素样式：

/* 默认隐藏router-outlet */
router-outlet {
  display: none;
}

/* 当nb-sidebar内部有li被悬停时，显示同级.content中的router-outlet */
nb-sidebar:has(li:hover) + .content router-outlet {
  display: block;
}

兼容性说明 #

:has()选择器目前已被绝大多数现代浏览器支持（包括Chrome、Edge、Firefox 121+、Safari 15.4+），若需兼容更旧的浏览器，纯CSS方案无法实现，此时需结合JavaScript监听hover事件来添加/移除类，但这不符合“仅用CSS/SCSS”的要求，因此优先推荐上述方案。

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