本文介绍如何通过 JavaScript 实现：当用户悬停在除特定 外的任意列表项上时，自动隐藏页面中央的背景图片（如瀑布图），并恢复页面背景为黑色；悬停离开后还原图片与粉色背景；点击“Background”项则强制显示图片。
本文介绍如何通过 javascript 实现：当用户悬停在除特定 `
要实现「仅在悬停非背景列表项时隐藏中心图片」这一交互效果，核心在于精准区分目标元素并统一管理图片显隐状态。原代码存在两个关键问题：一是 mouseout 事件会频繁触发导致状态混乱（多个
✅ 正确做法是采用事件委托 + 状态判断策略：
-
统一监听所有
- 的 mouseover 和 mouseout
； -
在 mouseover 中判断当前是否为 #backgroundli：
- 若是 → 显示图片，不改背景色；
- 若不是 → 隐藏图片，并将 背景设为黑色； -
在 mouseout 中不直接恢复图片，而是延迟检查——只有当鼠标真正移出所有
- 时才还原
（更健壮）；但为简化教程，我们采用「仅在 #backgroundli 的 mouseover 中显图，其余 mouseover 隐图 + 黑背景，所有 mouseout 统一还原」的轻量方案（适用于本场景）。
以下是优化后的完整 JavaScript（已修复拼写错误、冗余循环和括号语法问题，并增强可维护性）：
// 获取中心图片元素（确保唯一性）
const bgImage = document.querySelector("img");
// 悬停进入：统一处理
document.querySelectorAll("li").forEach(el => {
el.addEventListener("mouseenter", () => {
if (el.id === "backgroundli") {
// 特殊处理：背景项悬停 → 强制显示图片，背景色保持原样（如粉色）
bgImage.style.display = "block";
// 可选：高亮背景项自身
el.style.color = "white";
el.style.fontWeight = "bold";
} else {
// 其他项悬停 → 隐藏图片，全黑背景，高亮当前项
bgImage.style.display = "none";
document.body.style.background = "black";
el.style.color = "white";
el.style.fontWeight = "bold";
}
});
});
// 悬停离开：统一还原（注意：此处使用 mouseleave 更精准，避免子元素冒泡干扰）
document.querySelectorAll("li").forEach(el => {
el.addEventListener("mouseleave", () => {
// 还原所有 li 样式
el.style.color = "";
el.style.fontWeight = "";
// 仅当当前不是 backgroundli 时，才还原背景和图片；
// 但为防多次 leave 冲突，我们统一还原为初始态
document.body.style.background = "pink";
bgImage.style.display = "block";
});
});
? 重要注意事项：
- ✅ 使用 mouseenter/mouseleave 替代 mouseover/mouseout，避免子元素（如 标签）触发不必要的事件冒泡；
- ✅ document.querySelector("img") 假设页面仅有一个
（即中心背景图），若存在多个，建议添加 class="design-bg" 并用 document.querySelector(".design-bg") 精准定位；
- ⚠️ HTML 中
- 是无效属性（width 不适用于
- ），应通过 CSS 控制间距；
- ? 进阶建议：可为图片添加 transition: opacity 0.3s ease 实现淡入淡出效果，提升体验；
- ? 若需支持键盘导航（无障碍），建议补充 focus/blur 事件监听，使焦点操作行为与悬停一致。
最终效果：用户悬停于“View”“Objects”“Sound”等任意非背景项时，瀑布图立即消失，界面沉入纯黑，仅当前项高亮；一旦悬停至“Background”，图片瞬间回归，背景色不变；鼠标离开任一
