时间戳

首页 > 解决方案 > 尽管仅在正常状态下指定，为什么转换仍适用于活动状态

html - 尽管仅在正常状态下指定，为什么转换仍适用于活动状态

问题描述

我应用于正常状态的转换正在应用于活动状态的箭头。请注意，单击按钮时，箭头.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 过渡。但是，我想保持悬停按钮背景延迟。

标签： htmlcss

解决方案

将您的过渡设置为：transition: background .3s;

推荐阅读