响应式侧边栏鼠标悬停按钮时无法正常显示问题求助

Hey 👋，我瞅了你的代码，一下子就找到问题啦！

问题出在哪？ #

你写的 :is(.button:hover, .button:focus) .sidebar 这个CSS选择器根本不生效——因为 .sidebar 和 .button 不是父子关系啊！你的按钮在header容器里，侧边栏在aside容器里，俩是完全独立的兄弟节点层级，这个选择器是在找按钮内部的sidebar元素，这肯定找不到，所以hover时侧边栏当然没反应。

两种快速解决方法 #

方法1：用CSS :has() 选择器（无需改HTML，现代浏览器都支持）

直接修改控制sidebar显示的CSS规则，改成通过按钮的hover状态关联到它的祖先header的兄弟aside：

/* 删掉你原来的这行无效代码 */
/* :is(.button:hover, .button:focus) .sidebar { display: block; } */

/* 换成这个 */
header:has(.button:hover, .button:focus) ~ aside .sidebar {
  display: block;
}

:has() 是个很实用的新选择器，能帮我们基于子元素的状态来控制父元素的兄弟元素，完美适配你的DOM结构。

方法2：调整HTML结构（兼容更老浏览器）

如果需要兼容不支持:has()的旧浏览器，把按钮和侧边栏放到同一个直接父容器里，这样用通用兄弟选择器就能搞定：
修改后的HTML：

<body>
<!-- 新增一个统一的容器 -->
<div class="menu-wrapper">
  <header>
    <div class="header">
      <button class="button"><div class="menu-icon"></div></button>
    </div>
  </header>
  <aside>
    <div class="sidebar">
      <ul>
        <li><a href="#">Website A</a></li>
        <li><a href="#">Website B</a></li>
        <li><a href="#">Website C</a></li>
        <li><a href="#">Website D</a></li>
        <li><a href="#">Website E</a></li>
      </ul>
    </div>
  </aside>
</div>
</body>

对应的CSS：

/* 删掉原来的无效规则，换成这个 */
.header:has(.button:hover, .button:focus) ~ aside .sidebar {
  display: block;
}

要是想更简单，甚至可以把按钮直接和aside放在同一级，这样选择器能更短：

:is(.button:hover, .button:focus) ~ aside .sidebar {
  display: block;
}

额外优化：让动画生效 #

你给sidebar写了showMenu动画，但因为用了display: none，动画根本跑不起来。如果想要侧边栏滑入的效果，建议把隐藏方式换成transform：
修改sidebar的CSS：

.sidebar {
  z-index: 1;
  position: fixed;
  margin-top: 60px;
  background: var(--SIDE);
  height: 100%;
  transform: translateX(-100%); /* 初始时滑出左侧视野 */
  transition: transform 0.5s ease-in-out; /* 平滑过渡 */
  transform-origin: left center;
  /* 删掉 display: none; */
}

/* 显示时的状态 */
header:has(.button:hover, .button:focus) ~ aside .sidebar {
  transform: translateX(0); /* 滑回原位 */
}

这样你的侧边栏就能平滑滑入，体验比生硬的显示/隐藏好太多～

总的来说，核心就是选对CSS选择器的层级关系，只要把这个改对，问题就解决啦！

备注：内容来源于stack exchange，提问作者AnKi ToYa