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

Question

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

.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 度，鼠标移开我不想要动画，有没有办法做到这一点？

ps 我对 jquery 和 javascript 没用

Answer 1

检查我更新的小提琴：http: //jsfiddle.net/rHpDn/3/

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