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

【问题标题】：Using a CSS image sprite for hover effect without the scrolling animation在没有滚动动画的情况下使用 CSS 图像精灵实现悬停效果
【发布时间】：2013-07-16 20:06:45
【问题描述】：

我正在使用精灵图像来更改悬停和单击的背景（.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;

        }

【问题讨论】：

标签： scroll css-sprites background-position

【解决方案1】：

我认为，在您的 css 中某处您已指定了转换属性。通常当你有一个像这样指定的过渡属性：“transition: all 500ms ease;”时，背景位置会随着滚动效果而改变。如果你想防止这种滚动发生，那么你可以完全删除过渡属性，或者你可以只对你想要动画的属性使用过渡——边框、颜色等。但不是背景。如果您可以以某种方式提供指向您的页面的链接，或者提供 html 标记和 css，它将有所帮助。谢谢。

【讨论】：