CSS变换在悬停时没有过渡，在滑出时保持静态

css transform have no transition on hover and remain static on mouseout

本文关键字：静态 变换 悬停 没有过 CSS      更新时间：2023-09-26

我已经编码了一个指南针和一个指南针针的标题，当你悬停在指南针指针旋转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。我对jquery和javascript一窍不通

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

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

相关文章：