Question

我应用于正常状态的过渡将应用于活动状态上的箭头。请注意，单击按钮时，箭头.3s从白色变为与其余活动状态相同的颜色。如何在保持悬停时按钮背景的过渡的同时从箭头的活动状态中删除此过渡？

我尝试从transition: all .3s中移除.btn，但这也消除了悬停状态背景颜色延迟。我要保留这个。

body {
  background: #00b894;
}

.btn {
  color: #fff;
  padding: 0 60px;
  height: 64px;
  border: 3px solid #fff;
  line-height: 58px;
  background: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  outline: none;
  transition: all .3s;
  /* This is causing a transition on the arrow's active state */
}

.btn:hover {
  background: #009E7E;
}

.btn:active {
  border-color: #008066;
  color: #008066;
}

.btn:before {
  position: absolute;
  transition: all 0.3s;
  top: 50%;
  transform: translateY(-50%);
}

.btn--continue:before {
  left: 130%;
}

.btn--continue:hover:before {
  left: 80%;
}

.icon-arrow-right:before {
  content: "→";
}

<button class="btn btn--continue icon-arrow-right">Continue</button>

我希望白色箭头立即变为与其余活动状态相同的颜色。基本上，删除.3s过渡。但是，我想保持悬停按钮背景延迟。

Answer 1

将您的转换设置为：transition: background .3s;

为什么仅在正常状态下指定过渡才能应用于活动状态

1 个答案: