Question

我有一个庞大的项目，我无法找到正在缓慢过渡的东西。

基本上我想将此作为以下代码段。

但是在项目中，这种转变发生得非常缓慢。有什么想法吗？我缺少一个css标签？

＆＃13;

.checkout-options {
  margin: 100px;
  text-align: center;
}
label.checkout-btn {
  padding: 20px;
}
label.checkout-btn a {
  color: #fff;
  padding: 20px;
  background-color: #36526D;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-decoration: none;
}
label.checkout-btn a:hover,
label.checkout-btn a:focus {
  color: #fff;
  background-color: #195a96;
  text-decoration: none;
  padding: 23px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkout-options">
  <div class="checkout-options--noregister">
    <label class="checkout-btn"><a href="#!/shipping">Buy</a>
    </label>
  </div>
</div>

＆＃13;

Answer 1

您可以尝试添加：transition：0s;对你的CSS。看看是否有所作为。请参阅代码段。

＆＃13;

.checkout-options {
  margin: 100px;
  text-align: center;
}
label.checkout-btn {
  padding: 20px;
}
label.checkout-btn a {
  color: #fff;
  padding: 20px;
  background-color: #36526D;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-decoration: none;
}
label.checkout-btn a:hover,
label.checkout-btn a:focus {
  color: #fff;
  background-color: #195a96;
  text-decoration: none;
  padding: 23px;
  transition: 0s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkout-options">
  <div class="checkout-options--noregister">
    <label class="checkout-btn"><a href="#!/shipping">Buy</a>
    </label>
  </div>
</div>

＆＃13;

当鼠标悬停时，css按钮和链接变化缓慢

1 个答案: