时间戳

首页 > 解决方案 > ：1个按钮上的悬停过渡影响另一个按钮

css - ：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, 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>

标签： cssbuttonflexboxhovertransition

解决方案

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

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

推荐阅读