标签 javascript jquery html css
<分区>
我已经使用伪类悬停为标题提供了过渡。但我希望它在 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>最佳答案
你需要把所有的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>关于javascript - 当悬停被移除或消失时如何应用过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28458157/
相关文章：
javascript - 检查当前窗口是否由 javascript 打开
javascript - 我正在尝试使用延迟计时器使正方形出现，但它没有出现
javascript - for循环和remove()的细节
javascript - DOM 加载后添加的 WAI-ARIA 属性
javascript - 使用模板文字作为 id 从输入中获取数据
javascript - 使用 PureScript 和 Pulp 从服务器下载二进制文件的正确方法
javascript - 为什么我无法跳出这个 for 循环？