Question

我使用伪类悬停为头部提供了转换。但是我想让它在0.5s内具有相同的立方贝塞尔过渡函数的原始位置。当悬停被取消时，你可以看到它突然返回。那么有没有用于悬停的伪类或者我必须使用jQuery吗？

header{
  background:#000;
  padding:50px ;
  -webkit-transition: 0s padding-bottom;
}
header:hover{
  padding-bottom:90px;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
}

<header>
  </header>

Answer 1

您需要将所有transition相关样式放在header类，而不是:hover状态。试试这个：

header {
    background: #000;
    padding: 50px ;
    -webkit-transition: 0.5s padding-bottom;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
header:hover {
    padding-bottom: 90px;
}

<header></header>

Answer 2

你只需要转换到标题..所以元素仍然具有样式，你也不要再悬停了。现在转换设置为悬停，所以它只在悬停时转换;）请参阅代码段

＆＃13;

header {
  background: #000;
  padding: 50px;
  -webkit-transition: padding-bottom 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
header:hover {
  padding-bottom: 90px;
}

＆＃13;

<header>
</header>

＆＃13;

Answer 3

将持续时间属性设置为:hover样式以外，就像使用transition样式一样......

header{
  background:#000;
  padding:50px ;
  -webkit-transition: 0s padding-bottom;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
}
header:hover{
  padding-bottom:90px;
}

<header>
  </header>

如何在移除或移除悬停时应用转换？

3 个答案: