Question

我有一个蓝色的背面接地div，它会在悬停在它上面时动画到顶部。我需要div来遵循相同的效果并在联合国悬停形式上达到其原始位置它附带源代码。我应该为它编写单独的编码吗？当联合国将其悬停时，蓝色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;}

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

Answer 2

似乎你错过了#lion unhover中的过渡属性。尝试在#lion选择器中添加transition-duration。现在使用你的代码，当悬停#lion转换为2秒时，但在unhover中不是持续时间而不是转换。祝你好运

在取消div时保留动画效果

2 个答案: