咨询：CSS中hover子div时修改body或父div背景的实现方法

一、能否实现？ #

可以实现，但CSS本身没有原生的父选择器，所以需要借助CSS变量技巧或JavaScript来完成。

二、具体实现方法 #

1. 纯CSS方案（利用CSS变量继承）

借助CSS变量的向上继承特性，在目标子元素hover时修改变量值，让父元素/body通过引用变量切换背景色。

示例1：Hover子Div时修改父Div背景

<div class="parent">
  <div class="child">我是子Div</div>
</div>

.parent {
  --parent-bg: #ffffff;
  background-color: var(--parent-bg);
  padding: 20px;
  transition: background-color 0.3s;
}

.child:hover {
  --parent-bg: #f0f5ff;
}

示例2：Hover子Div内文本时修改Body背景

<body>
  <div class="parent">
    <div class="child">
      <span class="text">我是子Div里的文本</span>
    </div>
  </div>
</body>

body {
  --body-bg: #ffffff;
  background-color: var(--body-bg);
  transition: background-color 0.3s;
  min-height: 100vh;
}

.child .text:hover {
  --body-bg: #e6f7ff;
}

注意：只要子元素所在的DOM链能覆盖到目标元素（父/body），变量继承就会生效。

2. JavaScript方案（通用无结构限制）

如果CSS变量的继承逻辑不匹配你的DOM结构，用JavaScript监听鼠标事件是更灵活的选择。

示例1：Hover子Div时修改父Div背景

<div class="parent">
  <div class="child">我是子Div</div>
</div>

const child = document.querySelector('.child');
const parent = document.querySelector('.parent');

child.addEventListener('mouseover', () => {
  parent.style.backgroundColor = '#f0f5ff';
});

child.addEventListener('mouseout', () => {
  parent.style.backgroundColor = '#ffffff';
});

示例2：Hover子Div内文本时修改Body背景

<body>
  <div class="parent">
    <div class="child">
      <span class="text">我是子Div里的文本</span>
    </div>
  </div>
</body>

const text = document.querySelector('.child .text');
const body = document.body;

text.addEventListener('mouseover', () => {
  body.style.backgroundColor = '#e6f7ff';
});

text.addEventListener('mouseout', () => {
  body.style.backgroundColor = '#ffffff';
});

可以给目标元素添加transition CSS属性，让颜色切换更平滑。

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