鼠标hover li元素切换body背景失效，如何实现指定交互需求？

一、修复鼠标hover li切换body背景无效的问题 #

原JS代码存在三个核心错误，导致无效果：

1. getElementsByTagName返回集合，不能直接绑定事件：它返回的是HTMLCollection类数组对象，必须遍历每个<li>元素单独绑定事件。
2. 颜色值未加引号：black、pink是字符串，必须用双引号或单引号包裹，否则会被当作未定义变量处理。
3. 函数语法缺失大括号：事件回调函数的代码块必须用{}包裹，否则会触发语法报错。

修改后的hover效果JS代码：

// 获取所有li元素
const liElements = document.getElementsByTagName("li");
// 遍历每个li绑定事件
for (let li of liElements) {
  li.addEventListener("mouseover", function() {
    document.body.style.background = "pink";
  });
  li.addEventListener("mouseout", function() {
    document.body.style.background = ""; // 恢复默认背景，或设置你需要的初始颜色
  });
}

二、实现点击「Sign Out」的功能需求 #

需要给「Sign Out」锚点添加点击事件，同时完成三个指定效果：

1. HTML修改（给目标元素添加标识） #

<ul id="bottomlist">
  <li id="signOutLi"><a href="../homepage/index.html" id="signOutLink">Sign Out</a></li>
  <li width=10px>Sign in Using Different Username</li>
  <li>Save</li>
</ul>

2. CSS添加气泡提示样式 #

/* 气泡提示框基础样式 */
.tooltip {
  position: absolute;
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 10px;
  display: none;
}
/* 气泡左侧小三角装饰 */
.tooltip::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #333;
}

3. JS添加点击事件逻辑 #

const signOutLink = document.getElementById("signOutLink");
const signOutLi = document.getElementById("signOutLi");

signOutLink.addEventListener("click", function(e) {
  // 阻止默认跳转，先执行页面效果
  e.preventDefault();
  
  // 1. 将body背景改为黑色
  document.body.style.background = "black";
  
  // 2. 隐藏li文字（设为黑色，与背景一致）
  signOutLi.style.color = "black";
  
  // 3. 创建并显示气泡提示
  const tooltip = document.createElement("div");
  tooltip.className = "tooltip";
  tooltip.textContent = "Signing out...";
  tooltip.style.display = "inline-block";
  // 插入到Sign Out的li元素旁边
  signOutLi.parentNode.insertBefore(tooltip, signOutLi.nextSibling);
  
  // 可选：延迟1.5秒后跳转到首页
  setTimeout(() => {
    window.location.href = "../homepage/index.html";
  }, 1500);
});

三、最终注意事项 #

• 确保JS代码正确引入：取消原HTML中被注释的script标签，或在<body>末尾添加脚本：

<script type="text/javascript" src="scriptdesign.js" defer></script>

• defer属性可确保DOM加载完成后再执行JS，避免无法获取元素的问题。

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