如何实现鼠标悬停导航栏菜单栏时隐藏Sidebar？

DevOps 小满

2026-8-13

解决方案：鼠标移入导航栏时隐藏侧边栏

方案一：纯CSS实现（依赖HTML结构）

如果你的HTML结构是导航栏（.navbar）在侧边栏容器（.wrapper）之前，比如：

<nav class="navbar">
  <!-- 导航链接 -->
</nav>
<div class="wrapper">
  <div class="sidebar">
    <!-- 侧边栏内容 -->
  </div>
</div>

直接在现有CSS末尾添加以下代码，利用通用兄弟选择器实现交互：

/* 鼠标移入导航栏时隐藏侧边栏，带平滑过渡 */
.navbar:hover ~ .wrapper .sidebar {
  transform: translateX(-100%);
}

/* 可选：鼠标移出导航栏时恢复显示 */
.navbar:not(:hover) ~ .wrapper .sidebar {
  transform: translateX(0);
}

原理：通过~选择器选中导航栏之后的.wrapper下的.sidebar，利用transform将侧边栏移出视口，配合你已有的transition: all 0.5s ease属性实现平滑动画。
若不需要动画，可将transform替换为display: none，但该属性无过渡效果。

方案二：JavaScript实现（无结构限制，更灵活）

如果HTML结构无法满足CSS选择器要求，或需要更复杂交互逻辑，用JS实现更稳妥：

先添加控制隐藏的CSS类：

.sidebar.hidden {
  transform: translateX(-100%);
  /* 或 display: none; */
}

添加JavaScript代码：

// 获取DOM元素
const navbar = document.querySelector('.navbar');
const sidebar = document.querySelector('.wrapper .sidebar');

// 鼠标移入导航栏时隐藏侧边栏
navbar.addEventListener('mouseenter', () => {
  sidebar.classList.add('hidden');
});

// 可选：鼠标移出导航栏时重新显示侧边栏
navbar.addEventListener('mouseleave', () => {
  sidebar.classList.remove('hidden');
});