如何通过 CSS 实现悬停一个元素时改变其后相邻兄弟元素的样式-html教程-PHP中文网

如何通过 CSS 实现悬停一个元素时改变其后相邻兄弟元素的样式

本文详解如何使用 CSS 相邻兄弟选择器（+）实现“悬停某元素时动态改变其紧邻后续兄弟元素背景色”的效果，无需 JavaScript，兼容性好、语义清晰、性能高效。

本文详解如何使用 css 相邻兄弟选择器（`+`）实现“悬停某元素时动态改变其紧邻后续兄弟元素背景色”的效果，无需 javascript，兼容性好、语义清晰、性能高效。

在 Web 开发中，常需实现交互式视觉反馈，例如：当用户将鼠标悬停在第一个数据块（.square）上时，自动高亮显示紧随其后的第二个数据块（.square2）。这种效果完全可通过纯 CSS 实现，关键在于正确使用 相邻兄弟选择器（+）。

该选择器仅匹配紧跟在指定元素之后、且处于同一父级下的兄弟元素。因此，要使 .square:hover 触发 .square2 样式变化，两个 <div> 必须是<strong>同级、相邻、且 <code>.square2 位于 .square 之后。

✅ 正确 HTML 结构（注意：无换行或注释干扰，确保 DOM 顺序严格相邻）：

<div class="square">
  <p class="square1_text">~66.6%</p>
</div>
<div class="square2">
  <p class="square2_text">~33.3%</p>
</div>

✅ 对应 CSS 规则（注意属性名是 background-color，非 background_color；选择器需精确匹配类名）：

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.square:hover + .square2 {
  background-color: #ff0000; /* 悬停 square 时，square2 背景变红 */
}

⚠️ 注意事项：

若 .square 和 .square2 之间存在其他元素（如 <br>、注释、空格文本节点等），+ 选择器将失效——此时可改用通用兄弟选择器 ~（但会匹配所有后续同级 .square2，需谨慎）；
.square2 必须是 .square 的下一个同级元素，不能是子元素、父元素或前序元素；
初始状态建议显式定义 .square2 的默认背景色（如 background-color: #4caf50;），避免样式不可预测；
如需支持更复杂逻辑（如跨层级、非相邻、或需动画过渡），可配合 transition 或选用 JavaScript，但本例中纯 CSS 已足够简洁可靠。