scroll - 在没有滚动动画的情况下使用 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: all 500ms ease;”时，背景位置会随着滚动效果而改变。如果你想防止这种滚动发生，那么你可以完全删除过渡属性，或者你可以只对你想要动画的属性使用过渡——边框、颜色等。但不是背景。如果您可以以某种方式提供指向您的页面的链接，或者提供 html 标记和 css，它将有所帮助。谢谢。