:悬停在一个按钮上会影响另一个按钮

Question

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

TL；DR当我悬停时，我不希望其他按钮移动。

.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;(，而背景颜色是。(