1

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

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

2 回答 2

2

如果添加transition-duration: 2s;到#lion. 移除悬停后，蓝色形状应过渡回原始位置。使用下面的CSS。你也可以看到它在这个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;
}
于 2015-06-30T15:51:26.177 回答
0

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

于 2015-06-30T15:45:10.017 回答