无需JavaScript实现鼠标悬停小元素切换大Div背景的纯HTML/CSS方案问询

首先直接给结论：

• 针对多个小div悬停触发大div背景变化的问题，纯CSS完全可以解决，核心是用对选择器；
• 但仅通过悬停动作实现永久更改背景，纯CSS做不到——因为CSS没有状态记忆能力，:hover状态会在鼠标移开后立即失效。不过我们可以用「悬停预览+点击永久生效」的方案来满足类似需求，完全不需要JS。

一、解决“仅一个div悬停生效”的问题 #

你之前的问题大概率是用了相邻兄弟选择器（+），它只能选中紧邻的下一个兄弟元素。换成通用兄弟选择器（~），就能选中同一父级下所有后续的兄弟元素，不管中间隔了多少个元素。

代码示例（悬停预览版） #

<!-- 把所有触发元素放在目标大div的前面，保持同级 -->
<div class="trigger trigger-red"></div>
<div class="trigger trigger-green"></div>
<div class="trigger trigger-blue"></div>

<div class="main-box"></div>

.main-box {
  width: 400px;
  height: 300px;
  background-color: #eee;
  transition: background 0.3s ease;
  margin-top: 20px;
}

.trigger {
  width: 60px;
  height: 60px;
  display: inline-block;
  margin: 0 10px;
  border: 2px solid #333;
  cursor: pointer;
}

/* 通用兄弟选择器 ~ 选中所有后续的.main-box */
.trigger-red:hover ~ .main-box {
  background-color: #ff4444;
}

.trigger-green:hover ~ .main-box {
  background-color: #44dd44;
}

.trigger-blue:hover ~ .main-box {
  background-color: #4444ff;
}

这样每个小trigger悬停时，大div的背景都会对应变化，不会出现只有一个生效的情况。

二、实现“永久更改背景”的替代方案 #

如前所述，纯CSS无法让:hover的效果永久保留——因为鼠标移开后，:hover状态就消失了。但我们可以用隐藏的复选框+label元素来模拟“永久切换”的效果，逻辑是：

1. 用label作为视觉上的触发按钮，绑定到隐藏的复选框；
2. 复选框的:checked状态是持久的（除非手动取消）；
3. 利用:checked伪类来控制大div的背景样式，同时保留悬停预览的效果。

代码示例（悬停预览+点击永久生效版） #

<!-- 隐藏的复选框，用来存储状态 -->
<input type="checkbox" id="trigger-red" class="trigger-checkbox">
<!-- label作为触发元素，点击会切换对应复选框的状态 -->
<label for="trigger-red" class="trigger trigger-red"></label>

<input type="checkbox" id="trigger-green" class="trigger-checkbox">
<label for="trigger-green" class="trigger trigger-green"></label>

<input type="checkbox" id="trigger-blue" class="trigger-checkbox">
<label for="trigger-blue" class="trigger trigger-blue"></label>

<div class="main-box"></div>

/* 隐藏复选框，只用来存储状态 */
.trigger-checkbox {
  display: none;
}

.main-box {
  width: 400px;
  height: 300px;
  background-color: #eee;
  transition: background 0.3s ease;
  margin-top: 20px;
}

.trigger {
  width: 60px;
  height: 60px;
  display: inline-block;
  margin: 0 10px;
  border: 2px solid #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 悬停预览效果 */
.trigger-red:hover ~ .main-box {
  background-color: #ff4444;
}
.trigger-green:hover ~ .main-box {
  background-color: #44dd44;
}
.trigger-blue:hover ~ .main-box {
  background-color: #4444ff;
}

/* 点击后永久生效的样式 */
#trigger-red:checked ~ .main-box {
  background-color: #ff4444;
}
#trigger-green:checked ~ .main-box {
  background-color: #44dd44;
}
#trigger-blue:checked ~ .main-box {
  background-color: #4444ff;
}

/* 给选中的trigger加样式提示 */
#trigger-red:checked ~ .trigger-red {
  border-color: #ff4444;
  background-color: rgba(255, 68, 68, 0.2);
}
#trigger-green:checked ~ .trigger-green {
  border-color: #44dd44;
  background-color: rgba(68, 221, 68, 0.2);
}
#trigger-blue:checked ~ .trigger-blue {
  border-color: #4444ff;
  background-color: rgba(68, 68, 255, 0.2);
}

三、关于“纯CSS实现悬停即永久更改”的说明 #

如果你的需求是不需要点击，只要鼠标悬停过一次，背景就永久改变，那抱歉，纯CSS做不到。因为CSS是声明式的，没有变量存储状态的能力，:hover状态完全依赖鼠标的位置，一旦鼠标移开，状态就会重置。这种场景下必须用JavaScript来记录“是否悬停过”的状态，然后动态修改样式。

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