Html 悬停时重置转换

当我将鼠标悬停在div之外时，我希望使用move.down功能重置。 现在它没有重置，只是再次向上移动。 在这个问题上的任何帮助都是非常宝贵的

见代码：

CSS

}

HTML

参见小提琴：

---

期待响应。

将鼠标悬停在

#box_1

上方时应进行转换：

从

.object1

中删除转换并将其添加到选择器

#box_1:悬停。向下移动

---

@Zachsauier它在Chrome上对我有效-非常确定OP指的是在

悬停

上向下翻译元素的行。它几乎看不见，但它起作用了。这对我来说是个好办法，如果我在一个分区中有多个对象，比如.object1、.object2和.object3，它也会起作用吗？@LaurensHoogland是的，如果你使用的是类，它应该起作用。在本例中

。向下移动
。
#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);

<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>

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