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/

期待回应。

Answer 1

当将鼠标悬停在#box_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;
}

悬停时重置转换

1 个答案: