当我将鼠标悬停在<a> tag

时间：2019-04-22 11:36:57

标签： html css css3 delay

How to remove delay from .btn href on hover but i want delay for three different-different .btn showing line by line so i was set delay any solution for this type of issues. issues is when you hover on tag then i changed my background color & color on hover changed but display effect was very late due to delay. When you remove delay then working fine on hover changed fast background color & color.

* {
                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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

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

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

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

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

相关问题
最新问题