html - 当 child 悬停时避免容器填充

Question

我创建了一个容器 div 和一些子元素 div。容器具有水平填充。我需要子 div 在悬停时改变颜色，我做到了，但显然容器填充没有改变颜色。

为了避免这种情况，我可以不为容器设置填充，而是为 child 设置填充，但假设容器更复杂，在这种情况下，我必须为所有 child 设置填充，这不是我想要的。有更智能的解决方案吗？

悬停时的预期结果:

到目前为止，这是我的代码:

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

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

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

<div class="container">
  <div class="row">item 1</div>
  <div class="row">item 2</div>
  <div class="row">item 3</div>
  <div class="row">item 4</div>
  <div class="row">item 5</div>
</div>

Answer 1

您可以通过在悬停时在 .row 上设置负边距和正填充来解决您遇到的问题，如下所示。

margin-inline is a shortcut for margin-left and margin-right.

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

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

.row:hover {
  color: MidnightBlue;
  background: MediumTurquoise;
  padding-inline: 20px;
  margin-inline: -20px;
}

<div class="container">
  <div class="row">item 1</div>
  <div class="row">item 2</div>
  <div class="row">item 3</div>
  <div class="row">item 4</div>
  <div class="row">item 5</div>
</div>