CSS实现DIV悬停时切换body背景的方法咨询

嗨，我来帮你搞定这个问题！你的想法没问题，但原生CSS的规则限制了这种反向修改的操作，而且你写的代码语法也不对——原生CSS不允许在:hover规则里嵌套另一个选择器（那是Sass这类预处理器的写法）。下面给你两种靠谱的解决方案：

方案一：纯CSS方案（用:has()选择器，现代浏览器可用） #

现在主流浏览器已经支持:has()这个「父选择器」了，它能让我们选中包含特定状态子元素的祖先元素。用它就能轻松实现你的需求：

/* 把.target-div换成你要监听的那个div的类名 */
body:has(.target-div:hover) {
  background-color: red;
}

这个方法完全不用写JS，但要注意，旧版浏览器（比如老版Firefox或IE）不支持:has()，如果你的项目需要兼容这些旧环境，就用下面的JS方案。

方案二：JavaScript方案（兼容性拉满） #

通过监听div的鼠标进出事件，动态给body加/删样式类，这种方法不管什么浏览器都能跑：

先给body准备一个样式类：

.body-hover-bg {
  background-color: red;
}

然后加几行JS代码：

const hoverDiv = document.querySelector('.target-div');
const pageBody = document.body;

hoverDiv.addEventListener('mouseenter', () => {
  pageBody.classList.add('body-hover-bg');
});

hoverDiv.addEventListener('mouseleave', () => {
  pageBody.classList.remove('body-hover-bg');
});

这样鼠标一悬停在目标div上，body就会换上红色背景，离开后自动恢复原样。

为啥你的原代码没效果？ #

你写的.div:hover { body { background-color: red; } }有两个坑：

1. 原生CSS不支持这种嵌套写法，只有Sass、Less这类预处理器才允许嵌套选择器；
2. 就算语法改对了，常规CSS选择器只能从祖先往后代找元素，没法反过来通过子元素的状态修改祖先（:has()是专门解决这个问题的新特性）。

内容的提问来源于stack exchange，提问作者mp.jpeg