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

Question

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

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

“换句话说：

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

这些“点”是什么？我阅读了这些文章，我知道指定 CSS 代码是有顺序的，但我仍然不明白。就这样，我只得到了集合中的第一个精灵。仅供参考-我使用了精灵生成器。（准确地说是这个）

您可以在此处查看源代码。我建议放大浏览器以正确查看所有内容。

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>