这不是一个完美的解决方案,但你可以通过动画来处理悬停变化,让它在某种程度上起作用。
如果你在动画完成后取消悬停,它会正常工作,但如果你快速取消悬停,则不会进行任何动画。
CSS
div { width:50px;
height:72px; background:url(http://openbookproject.net/thinkcs/python/english3e/_images/duke_spritesheet.png) left top;
transition:background 1.5s steps(9, end);
background-position: 0px top;
-webkit-animation: none;
}
div:hover {
background-position:-450px top;
-webkit-animation: bkg 1.5s steps(9);
transition: none;
}
@-webkit-keyframes bkg {
0% {background-position: 0px top;}
100% {background-position: -450px top;}
}
还有一种使用jQuery的解决方案。此方法将动画从取消悬停时的位置倒回播放。它还重新计算时间,以防止减速。
jQuery
$( "div" ).hover(
function() {
var elem = $(this);
var cur = parseInt(elem.css("background-position-x"));
var steps = (450 + cur) / 50;
var time = steps * 0.1;
var trans = "background " + time + "s steps(" + steps + ", end)";
elem.css("transition", trans);
elem.css("background-position", "-450px 0px");
},
function() {
var elem = $(this);
var cur = parseInt(elem.css("background-position-x"));
var steps = - cur / 50;
var time = steps * 0.1;
var trans = "background " + time + "s steps(" + steps + ", end)";
elem.css("transition", trans);
elem.css("background-position", "0px 0px");
}
);
使用函数可以避免重复代码,从而简化jQuery代码,但我已尽可能将其设置得清晰明了。