html - 如何悬停在子元素上但将背景色拉伸(stretch)到父元素？

Question

我有一个包含多个子元素的父元素。父元素上有填充以缩进所有子元素。是否可以将鼠标悬停在子元素上并让背景颜色一直更改到父元素的边框？

HTML:

<div class="parent">
   <div class="child">Child 1</div>
   <div class="child">Child Number 2</div>
   <div class="child">Child Numero 3</div>
</div>

CSS:

.parent {
  border: 1px solid black;
  width: 30%;
  padding: 0.8em 11px 0.8em 13px;
}

.child:hover {
  background-color: blue;
}

background-color 只延伸到子元素的末尾。是否可以将其拉伸(stretch)到 parent 边界？

Answer 1

您可以简单地将填充移动到子元素:

.parent {
  border: 1px solid black;
  width: 30%;
  padding: 0.8em 0;
}
.child {
  padding:0 11px 0 13px;
}
.child:hover {
  background-color: blue;
}

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child Number 2</div>
  <div class="child">Child Numero 3</div>
</div>

如果您不想更改填充，您可以考虑拉伸(stretch)以占据整个宽度的伪元素:

.parent {
  border: 1px solid black;
  width: 30%;
  padding: 0.8em 11px 0.8em 13px;
  overflow:hidden;
}
.child {
  position:relative;
}
.child:hover::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-100px;
  right:-100px;
  z-index:-1;
  background-color: blue;
}

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child Number 2</div>
  <div class="child">Child Numero 3</div>
</div>