在没有滚动动画的情况下使用CSS图像精灵实现悬停效果

Question

我使用了一个精灵图片来改变悬停和点击时的背景( .keepImage类用于点击)。它都可以工作，但当背景图片改变时，它会滚动到正确的位置。有没有办法在没有滚动运动的情况下做到这一点？

JS：

<script>
        $(document).ready(function(){
            $("a.doing").click(function() { 
                $(this).siblings(".keepImage").removeClass("keepImage");
                $(this).addClass("keepImage");
            });
        });
</script>

CSS：

a.doing {
            width: 229px;
            height: 202px;
            margin-right: 8px;
            background: url(http://localhost:8000/img/manifesto/spr_doing.png) 0 0;
        }
a.doing:hover, a.doing.keepImage {
            background: url(http://localhost:8000/img/manifesto/spr_doing.png) -229px 0;

        }

Answer 1

我认为，在您的css中的某个地方，您已经指定了transition属性。通常，当您指定了如下的过渡属性：" transition : all 500ms ease;“时，背景位置将随滚动效果而改变。如果你想阻止这种滚动的发生，你可以完全移除过渡属性，或者你可以只对你想要动画效果的属性使用过渡，比如边框，颜色等。但不是背景。如果你能以某种方式提供一个到你的页面的链接，或者给出html标记和css，这将会有所帮助。谢谢。