如何实现hover子元素时background-color延伸至父元素边框？

当然可以实现这个效果！下面给你几个实用的解决思路，都是我日常开发里常用的：

方法1：负margin + 子元素内边距补偿 #

这是最直接的方案，通过负margin让子元素的背景“突破”自身范围，同时用子元素的内边距保持内容的缩进，和父元素原本的padding效果一致。

示例代码：

/* 父元素样式 */
.parent {
  padding: 1rem; /* 原本的缩进padding */
  border: 1px solid #ddd;
  width: 300px;
}

/* 子元素样式 */
.child {
  padding: 0.6rem 1rem; /* 左右1rem用来补偿负margin带来的内容偏移 */
  margin: -1rem; /* 负margin抵消父元素的padding，让背景延伸到父元素边框 */
  transition: background-color 0.2s ease;
}

.child:hover {
  background-color: #f5f5f5;
}

优点：代码简洁，逻辑直观；注意点：如果父元素设置了overflow: hidden，这个方法可能会导致子元素的部分内容被裁剪，需要根据布局调整。

方法2：伪元素覆盖法 #

用子元素的伪元素来模拟hover背景，通过绝对定位让伪元素覆盖父元素的padding区域，完全不影响子元素的原有布局。

示例代码：

/* 父元素需要设置相对定位 */
.parent {
  padding: 1rem;
  border: 1px solid #ddd;
  position: relative;
  width: 300px;
}

.child {
  padding: 0.6rem;
  position: relative; /* 让伪元素相对于子元素定位 */
  transition: color 0.2s ease;
}

.child:hover::before {
  content: "";
  position: absolute;
  top: -1rem; /* 向上延伸到父元素边框 */
  left: -1rem; /* 向左延伸到父元素边框 */
  right: -1rem; /* 向右延伸到父元素边框 */
  bottom: -1rem; /* 向下延伸到父元素边框 */
  background-color: #f5f5f5;
  z-index: -1; /* 把伪元素放在子元素内容下方，避免遮挡文字 */
}

优点：不修改子元素的margin和padding，对原有布局零侵入；适用场景：复杂布局下，不想改变元素盒模型的情况。

方法3：重构布局（父元素去padding，子元素加外层容器） #

如果允许调整HTML结构，可以把父元素的padding转移到子元素的外层容器上，让子元素本身占满父元素的宽度，hover时自然填满整个父元素区域。

示例代码：

<div class="parent">
  <div class="child-wrapper">
    <div class="child">子元素内容</div>
  </div>
</div>

.parent {
  border: 1px solid #ddd;
  width: 300px;
}

.child-wrapper {
  padding: 1rem; /* 原来父元素的padding移到这里 */
}

.child {
  padding: 0.6rem;
  transition: background-color 0.2s ease;
}

.child:hover {
  background-color: #f5f5f5;
}

优点：完全符合常规盒模型逻辑，不会有负margin或绝对定位的副作用；注意点：需要额外增加一层HTML结构，适合能调整结构的场景。

内容的提问来源于stack exchange，提问作者The Vanilla Thrilla