javascript - css 变换在悬停时没有过渡，在鼠标移出时保持静态

Question

我已经为标题编写了一个罗盘和一个罗盘针，当您将鼠标悬停在罗盘上时，针会以 720 度 Angular 旋转，但是，我想要一种方法，以便当我将鼠标从罗盘上移开时它不会倒车。抱歉，如果我忽略了一个简单的解决方案，但这是我当前的代码来解释我做得更好。

.arrow{
    width:100px; 
    height:100px;
    background-image:url(https://dl.dropbox.com/u/81513943/Monolith/images/compass.png);
    background-size:100px;
}

.arrowhover{
    position:absolute;
    margin-top:-100px;
    background-size:100px;
    width:100px;
    -webkit-transition: all 1.7s ease-in-out;
    -moz-transition: all 1.7s ease-in-out;
    -ms-transition: all 1.7s ease-in-out;
    -o-transition: all 1.7s ease-in-out;
    transition: all 1.7s ease-in-out;
    height:100px;
}

.arrowhover:hover{      
    -webkit-transform: rotate(1440deg);
    -moz-transform: rotate(1440deg);
    -webkit-transition: all 1.7s ease-out;
    -moz-transition: all 1.7s ease-in-out;
    -ms-transition: all 1.7s ease-in-out;
    -o-transition: all 1.7s ease-in-out;
    transition: all 1.7s ease-in-out;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

是的，指南针是正常的，悬停它旋转 720 度，鼠标移开时我不想要动画，有没有办法做到这一点？

p.s 我对 jquery 和 javascript 没用

Answer 1

检查我更新的 fiddle :http://jsfiddle.net/rHpDn/3/

我添加了 transition: all 0s ease-in-out; 到 .arrow，所以它不再有向后的过渡。