如何实现鼠标悬停按钮时切换body元素的背景颜色？

嘿，作为刚入门的JavaScript学习者，这个需求其实很好实现，我给你两种常用的思路，重点讲符合你学习需求的JS方法，顺便提个CSS的小技巧～

方法一：原生JavaScript事件监听（推荐，适合学习JS DOM操作） #

这是最适合你现在学习阶段的方式，核心就是给按钮绑定mouseover（鼠标悬停）和mouseout（鼠标离开）两个事件，然后在事件回调里修改body的背景色。

完整代码示例 #

// 等DOM加载完成再执行代码，避免找不到元素
document.addEventListener('DOMContentLoaded', () => {
  // 获取按钮和body元素
  const hoverButton = document.getElementById('button1');
  const pageBody = document.body;

  // 保存body的原始背景色——这里考虑到背景色是写在CSS里的，不是行内样式，所以用getComputedStyle获取实际生效的样式
  const originalBg = getComputedStyle(pageBody).backgroundColor;

  // 鼠标悬停时切换背景色为黑色
  hoverButton.addEventListener('mouseover', () => {
    pageBody.style.backgroundColor = '#000000';
  });

  // 鼠标离开时恢复原始背景色
  hoverButton.addEventListener('mouseout', () => {
    pageBody.style.backgroundColor = originalBg;
  });
});

关键知识点解释 #

• DOMContentLoaded：确保页面HTML结构加载完成后再执行JS，不然如果JS代码放在<head>里，会出现找不到button1元素的情况。
• getComputedStyle：因为你的body背景色是写在CSS里的（不是<body style="...">这种行内样式），直接用pageBody.style.backgroundColor会拿到空值，这个方法能获取到元素实际生效的样式值。
• addEventListener：现代JS推荐的事件绑定方式，比直接在HTML里写onmouseover更灵活，也更容易维护。

方法二：纯CSS实现（无需JS，适合快速场景） #

如果你只是想要效果，不想写JS，现在CSS的:has选择器也能实现这个需求，不过要注意它的兼容性（现代浏览器基本都支持了）：

body {
  background-color: #FFFFFF;
  transition: background-color 0.3s; /* 加个过渡动画，切换更丝滑 */
}

/* 当button1被悬停时，修改body的背景色 */
body:has(#button1:hover) {
  background-color: #000000;
}

这个方法不用写任何JS，但因为你正在学习JavaScript，还是优先掌握第一种方法更有助于理解DOM操作哦～

刚入门的时候多动手试试这些小案例，很快就能熟悉JS操作页面元素的逻辑啦！

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