子元素hover时如何让悬停效果覆盖容器水平padding区域

不需要给每个子元素单独设置padding，以下两种方案都可以极低维护成本实现padding区域随子元素悬停同步变色的效果，且完全不需要改动现有HTML结构。

方案1：全兼容通用方案（推荐，支持所有浏览器） #

核心思路是用负margin抵消容器的内边距占位，让子元素的背景渲染范围覆盖容器padding区域，再给子元素补对应内边距保证内容位置不变。
只需要在原有CSS基础上给.row新增对应规则即可：

.container {
  /* 把水平内边距定义成CSS变量，后续修改只需要改一处 */
  --container-h-padding: 20px;
  background: MidnightBlue;
  padding-left: var(--container-h-padding);
  padding-right: var(--container-h-padding);
}

.row {
  cursor: pointer;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  /* 新增以下4行规则 */
  margin-left: calc(var(--container-h-padding) * -1);
  margin-right: calc(var(--container-h-padding) * -1);
  padding-left: var(--container-h-padding);
  padding-right: var(--container-h-padding);
}

.row:hover {
  color: MidnightBlue;
  background: MediumTurquoise;
}

实现原理 #

• 容器的水平padding会让子元素的宽度比容器实际窄40px（左右各20px），这部分露出的容器背景就是悬停时的留白
• 给子元素设置和容器padding值相等的负左右margin，会把子元素的渲染边界向外扩展，刚好完全覆盖容器的padding留白区域
• 给子元素补上同等数值的左右内边距，就能让文字内容的位置和原来完全一致，不会出现贴边问题
• 后续容器内新增任意类型的子元素，只要统一应用这组margin和padding规则即可，不需要逐个单独适配；如果用CSS变量管理内边距值，后续调整间距只需要修改变量值，维护成本极低。

方案2：现代浏览器极简方案（无需修改子元素样式） #

如果不需要兼容Chrome105、Firefox121以下的老旧浏览器，可以用:has()选择器实现，完全不需要改动子元素的样式：

.container {
  background: MidnightBlue;
  padding-left: 20px;
  padding-right: 20px;
}

/* 悬停任意行时，同步修改容器背景色 */
.container:has(.row:hover) {
  background: MediumTurquoise;
}

.row {
  cursor: pointer;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}

.row:hover {
  color: MidnightBlue;
}

注意：这个方案存在场景局限性，仅适合所有列表项悬停色和容器默认背景色统一的场景，如果列表内有不同悬停色的子元素，会出现整个容器背景同步变色的问题，无法实现逐行独立的悬停效果。

悬停效果参考：

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