保留取消悬停 div 的动画效果答案

【问题标题】：Retain animation effect on unhovering a div保留取消悬停 div 的动画效果
【发布时间】：2015-06-30 15:24:19
【问题描述】：

我有一个蓝色背景的 div，它会在悬停在上面时被动画化。我需要 div 遵循相同的效果并在 UN 悬停形式上达到其原始位置附加源代码。我应该为它编写单独的编码吗？当我将它悬停时，蓝色 div 很快就回来了 HTML

<div id="wrapper">wrapper<div id="lion"><a href="#">Hover</a></div></div>

CSS

#wrapper{ position:relative;top:30px;height:140px;width:150px;overflow-y: hidden;}        
#lion{position:relative;width:100px;height:50px;top:20px;padding:20px;  background-color: blue;}
#lion a {color:black;text-decoration: none;}
#lion:hover{transform: translateY(-70px);transition-duration: 2s;}

【问题讨论】：

wrapper
Hover

这是 HTML对于我的问题
请将您的代码放入sn-p并整理一下。也许只有我一个人，但我觉得你期望人们阅读看起来像“缩小代码”的东西是很不礼貌的。
这是我的小提琴jsfiddle.net/krishnameg/3z9y1a7z

标签： html css onhover

【解决方案1】：

如果您将transition-duration: 2s; 添加到#lion。移除悬停后，蓝色形状应过渡回原始位置。使用下面的CSS。您还可以看到它在 this jsfiddle 上运行。

#wrapper{     
    position:relative;
    top:30px;
    height:140px;
    width:150px;
    overflow-y: hidden;
}        
#lion{
    position:relative;
    width:100px;
    height:50px;
    top:20px;
    padding:20px;  
    background-color: blue;
    transition-duration: 2s;
}
#lion a {
    color:black;
    text-decoration: none;
}
#lion:hover{
    transform: translateY(-70px);
    transition-duration: 2s;
}

【讨论】：

【解决方案2】：

您似乎缺少#lion unhover 中的过渡属性。尝试在#lion 选择器中添加过渡持续时间。现在使用您的代码，当悬停 #lion 过渡为 2 秒时，但在 unhover 中不是持续时间，也不是过渡。祝你好运

【讨论】：