CSS Sprite 不工作 - 仅显示集合中的第一张图像

Question

是的，我来过这里:CSS Sprite not working

不，我不明白。他所说的“点”是什么意思？:

“换句话说:

对于每个 ID 值，应用 100 分对于每个类值(或伪类或属性选择器)，应用 10 分对于每个元素引用，应用 1 分”

这些“点”是什么？我阅读了这些文章，发现指定 CSS 代码是有顺序的，但我仍然不明白。就这样，我只得到了集合中的第一个 Sprite 。仅供引用 - 我使用了 Sprite 生成器。 (This one to be exact)

可以查看源码here 。我建议放大浏览器以正确查看所有内容。

Answer 1

Ricky:img 标签遮挡了背景。我建议将其更改为 div。另外，您没有在代码中包含 NOS 对象。这是我想到的:

<script>
    var NOS = {
        itemno: 0,
        menuClasses: [
            'img-blog',
            'img-files',
            'img-forums',
            'img-login',
            'img-logout',
            'img-mail',
            'img-news',
            'img-profile',
            'img-reg',
            'img-settings',
            'img-shop',
            'img-status'
        ],
        toggle: function() {
            $('#menuimg').removeAttr('class').addClass(function() {
                ++NOS.itemno;
                if (NOS.itemno > NOS.menuClasses.length - 1) {
                    NOS.itemno = 0;
                }
                return NOS.menuClasses[NOS.itemno]; 
            });
        }
    }
</script>