当悬停被移除或消失时如何应用过渡？ [复制]答案

【问题标题】：How to apply transition when the hover is removed or gone? [duplicate]当悬停被移除或消失时如何应用过渡？ [复制]
【发布时间】：2015-02-11 23:38:13
【问题描述】：

我使用伪类悬停给标题一个过渡。但我希望它在 0.5 秒内以相同的三次贝塞尔转换函数回到原来的位置。当悬停取消时，您可以看到它突然返回。那么是否有任何用于悬停的伪类或者我必须使用 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案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;
}

&lt;header&gt;&lt;/header&gt;

【讨论】：

谢谢...它成功了！ :)
@AishwaryaR 没问题，很高兴为您提供帮助 :)

【解决方案2】：

你只需要给标题的过渡..所以元素仍然有样式，你也不要再悬停了。现在过渡设置为悬停，因此它仅在悬停时过渡；）见代码sn-p

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;
}

<header>
</header>

【讨论】：

【解决方案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>

【讨论】：