实现鼠标悬停右侧区域时自动滑出侧边栏，离开时平滑收起-html教程-PHP中文网

实现鼠标悬停右侧区域时自动滑出侧边栏，离开时平滑收起

本文详解如何通过纯 javascript 和 css 实现“仅当鼠标位于页面右侧指定区域时显示滑出式侧边栏”的交互效果，解决因混用 :hover 与 mousemove 导致的冲突、元素定位失效及闪烁问题。

本文详解如何通过纯 javascript 和 css 实现“仅当鼠标位于页面右侧指定区域时显示滑出式侧边栏”的交互效果，解决因混用 :hover 与 mousemove 导致的冲突、元素定位失效及闪烁问题。

要让侧边栏（.slider-overlay）真正响应“鼠标是否处于页面右侧”这一逻辑，关键在于统一控制权、避免样式冲突、精准计算边界。原始代码存在三大核心问题：

CSS :hover 与 JS mousemove 双重控制同一属性（如 width/opacity），引发竞态与回退异常；
JS 中引用了不存在的 #leftSide 元素，导致脚本执行中断，后续逻辑失效；
用 width 动画控制显隐，会使内部内容随宽度变化发生重排/闪烁，体验生硬。

✅ 正确方案采用 right 位移 + 固定宽度 + pageX 动态判断，既稳定又流畅：

✅ 推荐实现（已验证可用）

HTML 结构（保持简洁，无需 #leftSide）：

<div class="page hidden" id="mainPage">
  <div class="main-content">
    <h1>Welcome to the Main Page</h1>
    <p>This is the content of the main page.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/ai/2100" title="度加剪辑"><img
														src="https://img.php.cn/upload/ai_manual/000/000/000/175680086070100.png" alt="度加剪辑" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/ai/2100" title="度加剪辑" class="overflowclass">度加剪辑</a>
													<p class="overflowclass">一款百度旗下的AI视频创作与剪辑工具，结合智能剪辑和数字人等能力，帮助用户快速完成短视频内容制作。</p>
												</div>
												<a rel="nofollow" href="/ai/2100" title="度加剪辑" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  </div>
  <!-- 滑出式侧边栏 -->
  <div class="slider-overlay" id="sliderOverlay">
    <h2>Slider Content</h2>
    <p>Hover near the right edge to show me!</p>
  </div>
</div>

CSS 样式（关键：固定宽度 + right 定位 + 平滑过渡）：

.slider-overlay {
  position: absolute;
  top: 0;
  right: -500px; /* 初始完全隐藏（向右偏移自身宽度）*/
  width: 500px;   /* 建议设为固定值，便于 JS 计算 */
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              opacity 0.4s ease;
}

JavaScript 逻辑（精准判断鼠标是否进入右侧触发区）：

const sliderOverlay = document.querySelector('.slider-overlay');
const overlayWidth = 500; // 与 CSS 中 width 严格一致（单位 px）

// 初始化：确保初始状态为隐藏
sliderOverlay.style.right = `-${overlayWidth}px`;
sliderOverlay.style.opacity = '0';

document.addEventListener('mousemove', (e) => {
  const mouseX = e.pageX;
  const windowWidth = window.innerWidth;

  // 触发条件：鼠标 X 坐标 ≥ 视口宽度 - 侧边栏宽度（即进入最右侧 500px 区域）
  if (mouseX >= windowWidth - overlayWidth) {
    sliderOverlay.style.right = '0px';
    sliderOverlay.style.opacity = '1';
  } else {
    sliderOverlay.style.right = `-${overlayWidth}px`;
    sliderOverlay.style.opacity = '0';
  }
});

// 【重要】添加 resize 监听，适配窗口缩放
window.addEventListener('resize', () => {
  // 窗口变化时重置 overlayWidth（若使用动态宽度需重新获取）
  // 此处因使用固定值 500px，可省略；若改为 % 或 calc()，需在此更新
});

⚠️ 关键注意事项

宽度一致性：CSS 中 width 与 JS 中 overlayWidth 必须完全相同（推荐使用固定像素值，避免 getBoundingClientRect() 在 DOM 尚未渲染时返回 0）；
避免 :hover 干扰：彻底移除 .slider-overlay 的任何 :hover 规则，所有显隐由 JS 统一驱动；
性能优化：mousemove 事件高频触发，但本例仅做简单数值比较，无重排重绘，性能安全；如需极致优化，可添加 throttle（每 16ms 最多执行一次）；
移动端兼容性：此方案基于 mousemove，不适用于触摸设备；如需支持触屏，应补充 touchmove 事件并结合 clientX 判断。