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

p.s在jquery和javascript上没用了

Answer 1

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

我将transition: all 0s ease-in-out;添加到.arrow，因此它不再有转换回来了。

css转换在悬停时没有转换，在mouseout上保持静态

1 个答案: