호버 아웃시 재설정 전환

Question

div에서 마우스를 가져 왔을 때 move.down 기능을 재설정하고 싶습니다. 지금은 다시 설정되지 않지만 다시 위로 이동합니다. 이 주제에 대한 도움이 있으면 많은 도움이 될 것입니다.

참조 코드 :

CSS

#box_1{ 
    border-radius:12px; 
    display: block; 
    position: relative !important; 
    width: 204px; 
    height: 203px; 
    background:url(http://biready.visseninfinland.nl/wp-content/uploads/2014/01/input1.png); 
    background-size:204px 203px; 
    background-repeat:no-repeat; 
} 

#box_1 .hoverImg { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 204px; 
    height: 203px; 
    display: none; 
} 

#box_1:hover .hoverImg { 
    display: block; 
    width: 204px; 
    height: 203px; 
} 

#axis1:hover .move-down { 
    transform: translate(0,100px); 
    -webkit-transform: translate(0,100px); 
    -o-transform: translate(0,100px); 
    -moz-transform: translate(0,100px); 
} 

.object1 { 
    position: absolute; 
    transition: all 5s ease-in; 
    -webkit-transition: all 5s ease-in-out; /** Chrome & Safari **/ 
    -moz-transition: all 5s ease-in-out; /** Firefox **/ 
    -o-transition: all 5s ease-in-out; /** Opera **/ 
} 

.object1 { 
    position: absolute !important; 
} 
.line1 { 
    top: 8%; 
    left: 5%; 
    width: 180px; 
    height: 15px; 
} 

#box_1:hover .move-down { 
    transform: translate(0,150px); 
    -webkit-transform: translate(0,150px); 
    -o-transform: translate(0,150px); 
    -moz-transform: translate(0,150px); 

}

HTML

<div id="box_1"> 
<div id="axis1"><img class="object1 line1 move-down" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/balkje1.gif"/></div> 
<div class="hoverImg"><img src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/input2-80.png" width="204" height="203" alt=""></div> 
</div> 

는 바이올린 참조 : http://jsfiddle.net/38m6u/

이 t 기대 대답. 대신 #box_1 유혹 할 때

Answer 1

의 전환이 이루어져야 :

.object1에서 전환을 제거하고 전환 나를 위해 작동하지 않는 선택 #box_1:hover .move-down

UPDATED EXAMPLE HERE

#box_1:hover .move-down { 
    transform: translate(0, 150px); 
    -webkit-transform: translate(0, 150px); 
    -o-transform: translate(0, 150px); 
    -moz-transform: translate(0, 150px); 
    transition: all 5s ease-in; 
    -webkit-transition: all 5s ease-in-out; 
    -moz-transition: all 5s ease-in-out; 
    -o-transition: all 5s ease-in-out; 
}