当我悬停在 <a> 标签上时如何消除延迟

Question

如何在悬停时从 .btn href 中删除延迟，但我想延迟三个不同的 .btn 逐行显示，所以我被设置为延迟任何解决此类问题的方法。问题是当你悬停在标签上然后我改变了我的背景颜色和悬停时的颜色改变但是由于延迟显示效果很晚。当您删除延迟时，悬停时工作正常会改变快速背景颜色和颜色。

* {
                box-sizing: border-box;
            }
            .btn-action {
                width: 990px;
                margin: 0 auto;
                display: block;
            }
            .box {
                width: 300px;
                height: 300px;
                background-color: gray;
                display: inline-block;
                float: left;
                margin: 0 15px;
                text-align: center;
                padding: 20px;
            }
            .btn {
                border: 0;
                background-color: #1b1b1b;
                color: #fff;
                min-width: 1px;
                margin: 0 4px;
                display: inline-block;
                border-radius: 4px;
                width: 37px;
                height: 37px;
                text-align: center;
                vertical-align: middle;
                font-size: 14px;
                padding: 0;
                line-height: 38px;
                opacity: 0;
                transform: translateY(15px);
                -moz-transform: translateY(15px);
                -webkit-transform: translateY(15px);
                -ms-transform: translateY(15px);
                transition-property: transform, opacity;
                -moz-transition-property: transform, opacity;
                -webkit-transition-property: transform, opacity;
                -ms-transition-property: transform, opacity;
                transition: all 0.2s ease-in-out;
                -moz-transition: all 0.2s ease-in-out;
                -webkit-transition: all 0.2s ease-in-out;
                -ms-transition: all 0.2s ease-in-out;
                -o-transition: all 0.2s ease-in-out;
            }
            .box:hover .btn {
                opacity: 1;
                transform: translateY(0px);
                -moz-transform: translateY(0px);
                -webkit-transform: translateY(0px);
                -ms-transform: translateY(0px);
            }
            .btn:nth-child(1) {
                -webkit-transition-delay: 0.1s;
                -moz-transition-delay: 0.1s;
                -o-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }
            .btn:nth-child(2) {
                -webkit-transition-delay: 0.2s;
                -moz-transition-delay: 0.2s;
                -o-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }
            .btn:nth-child(3) {
                -webkit-transition-delay: 0.3s;
                -moz-transition-delay: 0.3s;
                -o-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }
            .btn:hover {
                background-color: #fff;
                color: #000;
            }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="btn-action">
            <div class="box">
                <a href="#" class="btn">
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                </a>
            </div>
            <div class="box">
                <a href="#" class="btn">
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                </a>
            </div>
            <div class="box">
                <a href="#" class="btn">
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                </a>
            </div>
        </section>

Answer 1

仅对变换和不透明度添加延迟。

我使用了 CSS 变量来简化它：

* {
  box-sizing: border-box;
}

.btn-action {
  width: 990px;
  margin: 0 auto;
  display: block;
}

.box {
  width: 300px;
  height: 300px;
  background-color: gray;
  display: inline-block;
  float: left;
  margin: 0 15px;
  text-align: center;
  padding: 20px;
}

.btn {
  border: 0;
  background-color: #1b1b1b;
  color: #fff;
  min-width: 1px;
  margin: 0 4px;
  display: inline-block;
  border-radius: 4px;
  width: 37px;
  height: 37px;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  padding: 0;
  line-height: 38px;
  opacity: 0;
  transform: translateY(15px);
  transition: 
   all 0.2s ease-in-out, /*we first define all*/
   /*then we redifine for transfrom,opacity*/
   transform 0.2s ease-in-out var(--s, 0s), 
   opacity 0.2s ease-in-out var(--s, 0s);
}

.box:hover .btn {
  opacity: 1;
  transform: translateY(0px);
}

.btn:nth-child(1) {
  --s: 0.1s;
}

.btn:nth-child(2) {
  --s: 0.2s;
}

.btn:nth-child(3) {
  --s: 0.3s;
}

.btn:hover {
  background-color: #fff;
  color: #000;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="btn-action">
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
</section>

这里没有 CSS 个变量：

* {
  box-sizing: border-box;
}

.btn-action {
  width: 990px;
  margin: 0 auto;
  display: block;
}

.box {
  width: 300px;
  height: 300px;
  background-color: gray;
  display: inline-block;
  float: left;
  margin: 0 15px;
  text-align: center;
  padding: 20px;
}

.btn {
  border: 0;
  background-color: #1b1b1b;
  color: #fff;
  min-width: 1px;
  margin: 0 4px;
  display: inline-block;
  border-radius: 4px;
  width: 37px;
  height: 37px;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  padding: 0;
  line-height: 38px;
  opacity: 0;
  transform: translateY(15px);
  transition: 
   all 0.2s ease-in-out, /*we first define all*/
   transform 0.2s ease-in-out, /*then we redifine for transfrom,opacity*/
   opacity 0.2s ease-in-out;
}

.box:hover .btn {
  opacity: 1;
  transform: translateY(0px);
}

.btn:nth-child(1) {
  transition-delay:0s, 0.1s,0.1s;
}

.btn:nth-child(2) {
  transition-delay:0s, 0.2s,0.2s;
}

.btn:nth-child(3) {
  transition-delay:0s, 0.3s,0.3s;
}

.btn:hover {
  background-color: #fff;
  color: #000;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="btn-action">
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
</section>

Answer 2

transition-property 被 transition: all 0.2s ease-in-out; 覆盖尝试使用：

  transition: transform 0.2s ease-in-out,
              opacity 0.2s ease-in-out;

相反，这应该可以解决您的颜色更改延迟问题。

此外，我建议不要使用 all，它可能会减慢页面重新呈现的速度。

当我悬停在 <a> 标签上时如何消除延迟

How to remove delay when i hover on <a> tag

html

css

delay