：1个按钮上的悬停过渡会影响另一个按钮

Question

所以我在 flexbox 中有 2 个按钮，悬停时有一个过渡，使按钮在填充中收缩并变暗。唯一的问题是，当我将鼠标悬停在一个按钮上并且执行转换时，它也会移动另一个按钮。我该如何解决这个问题。

TL;DR 我不希望其他按钮在我 :hover 时移动。

.buttons {
  margin-top: 3rem;
  display: flex;
  justify-content: space-evenly;
}

.buttons__change {
  /*left: 25%;
    position: relative;*/
  font-family: "Roboto", sans-serif;
  padding: 12px 52px;
  background: white;
  border: 2px solid rgb(201, 83, 5);
  color: rgb(201, 83, 5);
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-appearance: none;
}

.buttons__pay {
  /*left: 45%;
    position: relative;*/
  font-family: "Roboto", sans-serif;
  padding: 12px 52px;
  background: rgb(201, 83, 5);
  border: 2px solid rgba(201, 83, 5);
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.buttons__change:hover,
.buttons__change:focus,
.buttons__pay:hover,
.buttons__pay:focus {
  background-color: rgb(209, 179, 124);
  opacity: .7;
  color: gray;
  cursor: pointer;
  padding: 8px 28px;
  -webkit-transition: .45s .08s;
  -o-transition: .45s .08s;
  transition: .45s .08s;
}

<div class="buttons">
  <a class="buttons__change" href="services.html">Change Selection</a>

  <button class="buttons__pay" type="submit">Secure Checkout</button>
</div>

Answer 1

您更改了内边距，因此围绕它流动的元素将调整到它们需要围绕的新间距。最简单的解决方案是用相等大小的边距来弥补缺失的填充。

HTML盒图有padding盒内和margin盒外，所以你得到想要的效果。

明确地说，我在每个按钮上设置了一个零边距（顺便说一句，你可以抽象它——不需要复制任何条目，这只会让它们更难更新），然后添加从填充中移除的像素:hover.

.buttons {
  margin-top: 3rem;
  display: flex;
  justify-content: space-evenly;
}

.buttons__change {
  /*left: 25%;
    position: relative;*/
  font-family: "Roboto", sans-serif;
  padding: 12px 52px;
  margin: 0;
  background: white;
  border: 2px solid rgb(201, 83, 5);
  color: rgb(201, 83, 5);
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-appearance: none;
}

.buttons__pay {
  /*left: 45%;
    position: relative;*/
  font-family: "Roboto", sans-serif;
  padding: 12px 52px;
  margin: 0;
  background: rgb(201, 83, 5);
  border: 2px solid rgba(201, 83, 5);
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.buttons__change:hover,
.buttons__change:focus,
.buttons__pay:hover,
.buttons__pay:focus {
  background-color: rgba(209, 179, 124);
  opacity: .7;
  color: gray;
  cursor: pointer;
  padding: 8px 28px;
  margin: 4px 24px;
  -webkit-transition: .45s .08s;
  -o-transition: .45s .08s;
  transition: .45s .08s;
}

<div class="buttons">
  <a class="buttons__change" href="services.html">Change Selection</a>

  <button class="buttons__pay" type="submit">Secure Checkout</button>
</div>

我不想更改您的代码的任何其他内容，但我确实建议悬停按钮的对比度至少与悬停按钮之前的对比度一样高。当您的注意力集中在按钮上时，易读性不应降低。（例如，尝试 background-color: rgba(209, 179, 124, 0.7); color: black;。这确保文本颜色不会呈现 30% 透明（来自你的 opacity: .7;），而背景颜色是。）

：1个按钮上的悬停过渡会影响另一个按钮

:hover transition on 1 button affect the other one

css

transition

button

hover

flexbox