demo在这里https://jsfiddle.net/pkzt064c/点击预览
.d1{
width:20px;
height:20px; background:url(http://www.nuoyidata.com/templets/heibai/images/menu_ico1.png) no-repeat;
background-position:0 0;
}
<div class="d1"></div>
$(function(){
$(".d1").hover(function(){
$(this).animate({
"background-position-x":"0",
"background-position-y":"-29px"
},500);
},function(){
$(this).animate({
"background-position-x":"0",
"background-position-y":"0"
},500);
});
});
chrome没有问题。
ff下无法移动。
IE7,8没有问题。
IE9以上,鼠标移上有动画效果,移出的话没有动画效果。(很奇怪)
貌似只有webkit和ie支持吧。
解决方法:
1.把图片写在html里,使用定位然后top控制显示图片显示位置。附效果demo点击预览
2.详见知乎里的同一问题解决办法
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。