1

ホバリングすると上にアニメーション化される青い背景のdivがあります。同じ効果をたどり、ソースコードが添付されているUNホバリングフォームの元の位置に到達するには、divが必要です。私はそれのために別のコーディングを書くべきですか？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 に答える