如何在悬停被移除或消失时应用转换

How to apply transition when the hover is removed or gone?

本文关键字：消失 应用 转换 悬停      更新时间：2023-09-26

我已经使用伪类悬停给了header一个转换。但我希望它在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>

您需要将所有与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>

您只需要将转换提供给标头。。因此元素仍然具有样式，您也不再悬停。现在，转换设置为悬停，因此它只在悬停时转换；）参见代码片段

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>

也设置: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>

相关文章：