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

问题描述

所以我在 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,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,5);
  border: 2px solid rgba(201,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>

解决方法

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

HTML 框画在框内有padding，框外有margin，所以你得到了想要的效果。

明确地说，我在每个按钮上设置了一个零边距（顺便说一句，你可以抽象它——没有必要复制任何条目，这只会使它们更难更新），然后添加从 {{ 上的填充中删除的像素1}}。

: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,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,5);
  border: 2px solid rgba(201,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>。这可确保文本颜色不会在背景颜色为 30% 的情况下呈现（来自您的 background-color: rgba(209,124,0.7); color: black;）。

button button flexbox hover