如何在悬停时从 .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>
仅向变换和不透明度添加延迟。
我使用 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>
transition-property
被transition: all 0.2s ease-in-out;
覆盖尝试使用:
transition: transform 0.2s ease-in-out,
opacity 0.2s ease-in-out;
相反,这应该可以解决您的换色延迟问题。
另外,我建议不要使用all
,这可能会减慢页面重新渲染的速度。