如何实现hover非Background的<li>元素时隐藏背景图片？

我正在制作一个供用户设计安全空间的设计页面，页面中以<li>元素形式提供各类编辑、页面跳转等功能工具，屏幕中心是用户正在设计的虚拟空间图片（当前为瀑布图）。

需求：当hover除id为backgroundli的<li>元素外的任意<li>时，瀑布图消失，页面背景变为黑色，仅当前hover的<li>显示白色；停止hover后恢复原状。但添加代码后仍未实现需求，求解决建议。

我的代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styledesign.css">
</head>
<body>
  <h1 id="header">Design Mode</h1>
  <img src="./imagesdesign/purplewaterfall.png">
  <ul id="rightlist">
    <li>View </li>
    <li id="blurb">Coping Skills</li>
    <li id="blurb">Notes to Self</li>
  </ul>
  <ul id="leftlist">
    <li>Objects</li>
    <li id="backgroundli">Background</li>
    <li>Sound</li>
  </ul>
  <ul id="bottomlist">
    <li><a href="../homepage/index.html">Sign Out</a></li>
    <li width=10px><a href="../loginpage/login.html">
      Sign in Using Different Username</a></li>
      <li>Save</li>
    </ul>
    <script type="text/javascript" src="scriptdesign.js"></script>
</body>
</html>

JavaScript #

//change color of list element when hovering over it
//change color of list element back when not hovering over it
//make my background image disappear when hovering over any li element...
//...other than the background li...
//...and reappear once stopped hovering

document.querySelectorAll("li").forEach(el => {
  el.addEventListener("mouseover", () => {
    document.body.style.background = "black";
    el.style.color = "white";
    //document.querySelector("img").style.display = "none";
  })
});

document.querySelectorAll("li").forEach(el => {
  el.addEventListener("mouseout", () => {
    document.body.style.background = "pink";
    el.style.color = "black";
    //document.querySelector("img").style.display = "block";
  })
});

//document.getElementById("backgroundli").addEventListener("mouseover", () => {
//    document.querySelector("img").style.display = "block"
//  })
//});

解决建议 #

问题分析 #

1. 未排除backgroundli元素：当前所有<li>都会触发背景变黑逻辑，不符合需求
2. 隐藏图片的代码被注释，无法实现瀑布图消失的效果
3. 未处理其他<li>的显示状态：现在所有<li>都会显示，无法做到“仅当前hover的
4. 显示白色”
5. 重复遍历<li>绑定事件，冗余且没必要

修改后的JavaScript代码 #

// 获取所有li元素和中心图片
const allLis = document.querySelectorAll("li");
const waterfallImg = document.querySelector("img");
// 保存初始样式（如果是CSS定义的，建议用getComputedStyle获取更准确）
const originalBodyBg = "pink";
const originalLiColor = "black";

allLis.forEach(el => {
  // 跳过id为backgroundli的元素
  if (el.id === "backgroundli") return;

  el.addEventListener("mouseover", () => {
    // 设置body背景为黑色
    document.body.style.backgroundColor = "black";
    // 隐藏瀑布图
    waterfallImg.style.display = "none";
    // 把所有li设为透明（隐藏）
    allLis.forEach(li => li.style.color = "transparent");
    // 当前hover的li设为白色
    el.style.color = "white";
    // 处理li内的a标签，同步设为白色
    const link = el.querySelector("a");
    if (link) link.style.color = "white";
  });

  el.addEventListener("mouseout", () => {
    // 恢复body背景
    document.body.style.backgroundColor = originalBodyBg;
    // 显示瀑布图
    waterfallImg.style.display = "block";
    // 恢复所有li的文字颜色
    allLis.forEach(li => {
      li.style.color = originalLiColor;
      // 恢复a标签颜色
      const link = li.querySelector("a");
      if (link) link.style.color = originalLiColor;
    });
  });
});

额外提示 #

• HTML里有两个<li>的id都是blurb，id是唯一标识符，重复会导致后续DOM操作出问题，建议改成class（比如class="blurb"）
• 如果初始的body背景色是通过CSS设置的，建议用getComputedStyle(document.body).backgroundColor来获取，避免硬编码

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