如何实现鼠标悬停Div内链接时动态切换body背景色？

没问题！要实现当鼠标悬停在Div容器内的链接时，仅在悬停状态下改变body的背景色，这里有两种实用方案，根据你的浏览器兼容需求来选：

方案一：使用CSS :has() 选择器（现代浏览器推荐） #

CSS的:has()选择器是个很实用的新特性，它允许我们根据子元素的状态来给父元素（甚至更高层级的元素）设置样式，完美适配你的需求。

HTML结构示例 #

<body>
  <div class="link-container">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
  </div>
</body>

CSS代码 #

/* 默认body样式 */
body {
  background-color: #ffffff;
  transition: background-color 0.3s ease; /* 添加过渡动画，让颜色变化更平滑 */
}

/* 当.link-container内的a标签被悬停时，改变body的背景色 */
body:has(.link-container a:hover) {
  background-color: #f0f0f0; /* 这里替换成你想要的悬停背景色 */
}

说明：:has()目前已经被Chrome、Firefox、Safari等主流现代浏览器支持，如果你的项目不需要兼容IE或非常老旧的浏览器，这个方案最简洁，纯CSS就能搞定。

方案二：使用JavaScript（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，用JavaScript监听鼠标事件是稳妥的选择：

HTML结构（和方案一一致） #

<body>
  <div class="link-container">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
  </div>
</body>

JavaScript代码 #

// 获取容器内的所有链接
const links = document.querySelectorAll('.link-container a');
// 获取body元素
const body = document.body;

// 给每个链接添加鼠标进入事件
links.forEach(link => {
  link.addEventListener('mouseenter', () => {
    body.style.backgroundColor = '#f0f0f0'; // 悬停时的背景色
  });

  // 添加鼠标离开事件，恢复默认背景色
  link.addEventListener('mouseleave', () => {
    body.style.backgroundColor = '#ffffff'; // 默认背景色
  });
});

说明：这个方案通过监听mouseenter和mouseleave事件，手动切换body的背景色，兼容性更好，几乎所有浏览器都能支持。如果想要更平滑的过渡效果，记得在CSS里给body加上transition: background-color 0.3s ease;，和方案一一样，这样颜色变化不会太突兀。

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